Changed UI

app.py

@@ -31,7 +31,7 @@ def upload(file):
     folder_contents_dict = get_folder_contents_dict(root_directory)
     print(folder_contents_dict)
 
-    base_url = "https://abhicodes-file-sharing-system.hf.space/file=/tmp/gradio"
+    base_url = "https://abhicodes-file-uploader-component.hf.space/file=/tmp/gradio"
 
     urls = [f"{base_url}/{folder}/{file}" for folder, files in folder_contents_dict.items() for file in files]
 
@@ -73,21 +73,38 @@ def get_uploads(secret):
     else:
         return {"error": "Unauthorized"}
 
-with gr.Blocks(theme=theme) as demo:
+js = '''
+function test() {
+    console.log("Test");
+    document.title = "File Sharing System";
+    var link = document.createElement('link');
+    link.type = 'image/x-icon';
+    link.rel = 'shortcut icon';
+    link.href = 'https://cdn3d.iconscout.com/3d/premium/thumb/cloud-storage-5402862-4521475.png';
+    document.getElementsByTagName('head')[0].appendChild(link);
+}
+'''
+
+with gr.Blocks(theme=theme, js=js) as demo:
     gr.Markdown('''<h1 style="text-align:center;">File Storing and Sharing System</h1>''')
-    gr.Markdown('''This project is a file storing and sharing system built using Gradio for the front-end interface and MongoDB for the back-end database. The system allows users to upload files, which are then stored and managed within a specified directory. URLs for accessing these files are generated and stored in a MongoDB collection, making it easy to share and access the uploaded files.
-                > To know more read the docs at: [Documentation](https://huggingface.co/spaces/abhicodes/file-sharing-system/blob/main/README.md)
-                ''')
+    with gr.Column():
+        gr.Markdown('''<div style="display:flex;justify-content:center;align-items:center"><img src="https://cdn3d.iconscout.com/3d/premium/thumb/cloud-storage-5402862-4521475.png" alt="logo" width="100"/>
+                        <div style="width:100px;"></div>
+                        This project is a file storing and sharing system built using Gradio for the front-end interface and MongoDB for the back-end database. The system allows users to upload files, which are then stored and managed within a specified directory. URLs for accessing these files are generated and stored in a MongoDB collection, making it easy to share and access the uploaded files.''')
+    
     with gr.Row():
         with gr.Column():
-            gr.Markdown('''<h1 style="text-align:center;">Uploader</h1>''')
+            gr.Markdown('''<h1 style="text-align:center;display:flex;justify-content:center;align-items:center"><img src="https://i.ibb.co/FB6tMdT/upload.png" alt="upload" width="50">Uploader</h1>''')
             input = gr.File(label="Input", file_count="multiple")
             input.upload(fn=upload, inputs=input)
         with gr.Column():
-            gr.Markdown('''<h1 style="text-align:center;">Downloader</h1>''')
-            secret_key = gr.Text(placeholder="Enter your Secret Key")
+            gr.Markdown('''<h1 style="text-align:center;display:flex;justify-content:center;align-items:center"><img src="https://i.ibb.co/K9Bq3j7/download.png" alt="download" width="50">Downloader</h1>''')
+            secret_key = gr.Text(placeholder="Enter your Secret Key", type="password", autofocus=True)
             uploads = gr.Markdown(label="Uploads")
             get_upload_button = gr.Button("Get Uploads", variant='primary')
             get_upload_button.click(fn=get_uploads, inputs=secret_key, outputs=uploads)
 
+    gr.Markdown('''> To know more read the docs at: [Documentation](https://huggingface.co/spaces/abhicodes/file-sharing-system/blob/main/README.md)''')
+
+
 demo.launch(debug=True)