src/frontend/shared/File.svelte

<script lang="ts">
  import type { FileData } from "@gradio/client";
  import { BlockLabel, Empty } from "@gradio/atoms";
  import { File } from "@gradio/icons";
  import FilePreview from "./FilePreview.svelte";

  import MolecularViewer from "./MolecularViewer.svelte";

  import type { I18nFormatter } from "@gradio/utils";

  export let value: FileData | FileData[] | null = null;
  export let label: string;
  export let show_label = true;
  export let selectable = false;
  export let height: number | undefined = undefined;
  export let i18n: I18nFormatter;
  export let config = {};
  export let confidenceLabel = "";
  export let representations = [];
  export let moldata = null;
  export let molviewer = false;
  export let errors = [];
</script>

<BlockLabel
  {show_label}
  float={value === null}
  Icon={File}
  label={label || "File"}
/>

{#if value}
  <FilePreview {i18n} {selectable} on:select {value} {height} />

  <!-- {JSON.stringify(moldata)} -->
  {#if moldata != null && molviewer}
    <MolecularViewer {moldata} {config} {confidenceLabel} {representations} />
  {/if}
{:else}
  <Empty unpadded_box={true} size="large"><File /></Empty>
{/if}