fix: UI and pdf output

main.py

@@ -120,43 +120,6 @@ def classifyFiles(file):
 
 
 
-    # # dict for counting doctypes
-    # doctype_dict = dict()
-
-    # # writer for csv
-    # with open("{}/doctype_count.csv".format(output_dir), 'w', newline='') as outcsv:
-    #     writer = csv.writer(outcsv)
-    #     writer.writerow(["Type", "Count"])
-
-    #     for file in files:
-    #         try:
-    #             contents = file.file.read()
-    #             classify_res = classify_acct_dtype_str(BytesIO(contents))
-    #         except Exception as err:
-    #             print(Exception, err)
-    #             return {"message": "There was an error in uploading file(s)"}
-    #         finally:
-    #             file.file.close()
-
-    #         print(classify_res)
-
-    #         if (classify_res in doctype_dict):
-    #                 doctype_dict.update({classify_res : doctype_dict[classify_res] + 1})
-    #         else:
-    #                 doctype_dict.update({classify_res : 1})
-
-
-
-    # export_media_type = 'text/csv'
-    # export_headers = {
-    #     "Content-Disposition": "attachment; filename={file_name}.csv".format(file_name="output")
-    # }
-    # return StreamingResponse(csv_file_binary, headers=export_headers, media_type=export_media_type)
-
-
-
-
-
 
 
 app.mount("/", StaticFiles(directory="static", html=True), name="static")

static/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fast API 🤗 Space served with Uvicorn</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css" />
     <script type="module" src="script.js"></script>
   </head>
@@ -19,12 +20,15 @@
             target="_blank">donutclassifier_acctdocs_by_doctype</a>
         </p>
         <form class="doc-classification-form">
-          <input id="doc-input" type="file" multiple="multiple" accept="image/jpeg, image/png, image/jpg, application/pdf">
-          <a id="doc-output-link" style="visibility: hidden;">
-            <button type="button">Download</button>
-          </a>
+          <div class="input-group mb-3">
+            <label class="input-group-text" for="doc-input">Upload document</label>
+            <input id="doc-input" class="form-control" type="file" multiple="multiple" accept="image/jpeg, image/png, image/jpg, application/pdf">
+          </div>
+          
+          <a id="doc-output-link" role="button" class="btn btn-primary disabled" tabindex="-1">Download</a>
         </form>
       </section>
     </main>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
   </body>
 </html>

static/script.js

@@ -17,13 +17,20 @@ const outputDocLink = document.getElementById('doc-output-link');
 
 inputDoc.addEventListener("change", async event =>{
   /* hide Download button when in classification process */
-  outputDocLink.style.visibility = "hidden";
+  // outputDocLink.style.visibility = "hidden";
+
+  // dlOutputBtn.disabled = true;
+  outputDocLink.ariaDisabled = "true";
+  outputDocLink.classList.add("disabled");
+
   const files = event.target.files;
   
   /* make Download button's visible, and add the link to download the resulting .csv file */
   await classifyImages(files).then(async (result) => {
-    outputDocLink.style.visibility = "visible";
-
+    // outputDocLink.style.visibility = "visible";
+    // dlOutputBtn.disabled = false;
+    outputDocLink.ariaDisabled = "false";
+    outputDocLink.classList.remove("disabled");
 
     const disposition = result.headers.get('Content-Disposition');
     const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;