feat: update frontend

zmh-program · Jul 23, 2024 · d573177 · d573177 · zmh-program · Jul 23, 2024
1 parent f9091fa
commit d573177
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -189,6 +189,17 @@ Response
 - `OCR_ENDPOINT` Paddle OCR Endpoint
     - *e.g.: *http://example.com:8000*
 
+## Common Errors
+- *Cannot Use `Save All` Options Without Storage Config*:
+    - This error occurs when you enable `save_all` option without storage config. You need to set `STORAGE_TYPE` to `local` or other storage type to use this option.
+- *Trying to upload image with Vision disabled. Enable Vision or OCR to process image*:
+    - This error occurs when you disable `enable_vision` and `enable_ocr` at the same time. You need to enable at least one of them to process image files.
+- *.ppt files are not supported, only .pptx files are supported*:
+    - This error occurs when you upload a old version of Office PowerPoint file. You need to convert it to `.pptx` format to process it.
+- *.doc files are not supported, only .docx files are supported*:
+    - This error occurs when you upload a old version of Office Word file. You need to convert it to `.docx` format to process it.
+- *File Size Limit Exceeded*:
+    - This error occurs when you upload a file that exceeds the `MAX_FILE_SIZE` limit. You need to reduce the file size to upload it.
 ## Development
 - **~/config.py**: Env Config
 - **~/main.py**: Entry Point

diff --git a/handlers/processor.py b/handlers/processor.py
@@ -37,6 +37,7 @@ async def process_file(
             raise ValueError(f"File size {file_size:.2f} MiB exceeds the limit of {MAX_FILE_SIZE} MiB.")
 
     filename = file.filename.lower()
+
     if save_all:
         # save all types of files to storage
         return "file", await process_all(file)

diff --git a/index.html b/index.html
@@ -178,6 +178,59 @@
             transform: rotate(360deg);
         }
     }
+
+    .param-box {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 1rem;
+    }
+
+    .param {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        color: hsl(var(--text-secondary));
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .param label {
+        cursor: pointer;
+    }
+
+    input[type="checkbox"] {
+        position: relative;
+        margin-right: 0.25rem;
+        cursor: pointer;
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        width: 1rem;
+        height: 1rem;
+        border: 1px solid hsl(var(--border));
+        border-radius: 0.25rem;
+        background: hsl(var(--background));
+        transition: .25s;
+    }
+
+    input[type="checkbox"]:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.125rem;
+        background: hsl(var(--background));
+        transition: .25s;
+    }
+
+    input[type="checkbox"]:checked:after {
+        background: hsl(var(--primary));
+    }
 </style>
 </head>
 <body>
@@ -194,18 +247,36 @@
             Click to upload a file
         </span>
     </label>
-    <input type="text" id="model" placeholder="Please enter the model name (e.g. gpt-4)" class="model-input" value="gpt-4-turbo">
+    <div class="param-box">
+        <div class="param">
+            <input type="checkbox" id="vision" checked>
+            <label for="vision">Vision</label>
+        </div>
+        <div class="param">
+            <input type="checkbox" id="ocr" checked>
+            <label for="ocr">OCR</label>
+        </div>
+        <div class="param">
+            <input type="checkbox" id="all" checked>
+            <label for="all">Save All</label>
+        </div>
+    </div>
     <div id="output" class="output-text"></div>
 </div>
 <script>
     const input = document.getElementById('file');
     const output = document.getElementById('output');
-    const model = document.getElementById('model');
+
+    const vision = document.getElementById('vision');
+    const ocr = document.getElementById('ocr');
+    const all = document.getElementById('all');
 
     async function post(file) {
         const formData = new FormData();
         formData.append('file', file);
-        formData.append('model', model.value);
+        formData.append('enable_vision', vision.checked);
+        formData.append('enable_ocr', ocr.checked);
+        formData.append('save_all', all.checked);
 
         try {
             const resp = await fetch('/upload', {

diff --git a/store/store.py b/store/store.py
@@ -25,4 +25,7 @@ async def process_image(file: UploadFile) -> str:
 async def process_all(file: UploadFile) -> str:
     """Process all files"""
 
+    if STORAGE_TYPE == "common":
+        raise ValueError("Cannot Use `Save All` Options Without Storage Config")
+
     return await process_image(file)