UI to use mimetype configuration (#71)

* Use mimetype configuration
* Also improves the divider for the content upload section
* Add a header for content upload

backend/server/api/configurables.py

@@ -2,7 +2,7 @@
 from typing import List
 
 from fastapi import APIRouter
-from typing_extensions import Annotated, TypedDict
+from typing_extensions import TypedDict
 
 from extraction.parsing import MAX_FILE_SIZE_MB, SUPPORTED_MIMETYPES
 from server.models import SUPPORTED_MODELS
@@ -18,7 +18,7 @@ class ConfigurationResponse(TypedDict):
     """Response for configuration."""
 
     available_models: List[str]
-    supported_mimetypes: List[str]
+    accepted_mimetypes: List[str]
     max_file_size_mb: int
 
 
@@ -27,6 +27,6 @@ def get() -> ConfigurationResponse:
     """Endpoint to show server configuration."""
     return {
         "available_models": sorted(SUPPORTED_MODELS),
-        "supported_mimetypes": SUPPORTED_MIMETYPES,
+        "accepted_mimetypes": SUPPORTED_MIMETYPES,
         "max_file_size_mb": MAX_FILE_SIZE_MB,
     }

backend/tests/unit_tests/api/test_api_configurables.py → backend/tests/unit_tests/api/test_api_configuration.py

@@ -9,9 +9,9 @@ async def test_configuration_api() -> None:
         result = response.json()
         assert isinstance(result, dict)
         assert sorted(result) == [
+            "accepted_mimetypes",
             "available_models",
             "max_file_size_mb",
-            "supported_mimetypes",
         ]
         models = result["available_models"]
         assert all(isinstance(model_name, str) for model_name in models)

backend/tests/unit_tests/test_parsing.py

@@ -10,7 +10,7 @@
 from tests.unit_tests.fixtures import get_sample_paths
 
 
-def test_list_of_supported_mimetypes() -> None:
+def test_list_of_accepted_mimetypes() -> None:
     """This list should generally grow! Protecting against typos in mimetypes."""
     assert SUPPORTED_MIMETYPES == [
         # Two MS Word mimetypes are disabled for now

frontend/app/components/Playground.tsx

@@ -1,21 +1,23 @@
 "use client";
-
 import {
   Button,
-  Textarea,
   Heading,
   Tab,
-  Tabs,
+  Box,
+  Divider,
+  AbsoluteCenter,
   TabList,
   TabPanel,
   TabPanels,
+  Tabs,
   Text,
+  Textarea,
 } from "@chakra-ui/react";
 import { useMutation } from "@tanstack/react-query";
 import React from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { runExtraction } from "../utils/api";
+import { runExtraction, useConfiguration } from "../utils/api";
 import { Extractor } from "./Extractor";
 import { ResultsTable } from "./ResultsTable";
 
@@ -36,7 +38,10 @@ export const Playground = (props: PlaygroundProps) => {
   const { data, isPending, mutate } = useMutation({
     mutationFn: runExtraction,
   });
+
+  const requestServerConfig = useConfiguration();
   const [isDisabled, setIsDisabled] = React.useState(false);
+
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
@@ -93,13 +98,26 @@ export const Playground = (props: PlaygroundProps) => {
         <div>
           <Extractor extractorId={extractorId} isShared={isShared} />
         </div>
+        <Heading>Upload Content</Heading>
         <form
           className="m-auto flex flex-col content-between gap-5 mt-10 mb-10"
           onSubmit={handleSubmit}
           onChange={handleChange}
         >
-          <input type="file" name="file" className="file-input " />
-          <div className="divider">OR</div>
+          {requestServerConfig.isFetched && (
+            <input
+              type="file"
+              name="file"
+              className="file-input"
+              accept={requestServerConfig.data?.accepted_mimetypes.join(", ")}
+            />
+          )}
+          <Box position="relative" padding="10">
+            <Divider />
+            <AbsoluteCenter bg="white" px="4">
+              OR
+            </AbsoluteCenter>
+          </Box>
           <Textarea
             placeholder="Enter text to extract information from..."
             name="text"

frontend/app/utils/api.tsx

@@ -50,6 +50,25 @@ const createExtractor: MutationFunction<any, any> = async (extractor) => {
   return response.data;
 };
 
+export type ServerConfiguration = {
+  available_models: string[];
+  max_file_size_mb: number;
+  accepted_mimetypes: string[];
+};
+
+const getConfiguration = async (): Promise<ServerConfiguration> => {
+  const baseUrl = getBaseApiUrl();
+  const response = await axios.get(`${baseUrl}/configuration`);
+  return response.data;
+};
+
+export const useConfiguration = () => {
+  return useQuery({
+    queryKey: ["getConfiguration"],
+    queryFn: getConfiguration,
+  });
+};
+
 export const suggestExtractor = async ({
   description,
   jsonSchema,