update ui

app.py

@@ -235,24 +235,33 @@ with gr.Blocks() as demo:
         """<h1 style='text-align: center;'> PDFs to Page Images Converter</h1>
         <center><i> &#128193; Convert PDFs to an image dataset, splitting pages into individual images &#128193; </i></center>"""
     )
-    gr.Markdown(
+    gr.HTML(
         """
-        This app allows you to:
-        1. Upload one or more PDF files
-        2. Convert each page of the PDFs into separate image files
-        3. (Optionally) sample a specific number of pages from each PDF
-        4. (Optionally) Create a downloadable ZIP file of the converted images
-        5. (Optionally) Upload the images to a Hugging Face dataset repository
+        <div style="display: flex; justify-content: center; align-items: center; max-width: 1000px; margin: 0 auto;">
+            <div style="flex: 1; padding-right: 20px;">
+                <p>This app allows you to:</p>
+                <ol>
+                    <li>Upload one or more PDF files</li>
+                    <li>Convert each page of the PDFs into separate image files</li>
+                    <li>(Optionally) sample a specific number of pages from each PDF</li>
+                    <li>(Optionally) Create a downloadable ZIP file of the converted images</li>
+                    <li>(Optionally) Upload the images to a Hugging Face dataset repository</li>
+                </ol>
+            </div>
+            <div style="flex: 1;">
+                <img src="https://huggingface.co/spaces/Dataset-Creation-Tools/pdf-to-page-images-dataset/resolve/main/assets/PDF%20page%20split%20illustration.png" 
+                     alt="PDF page split illustration" 
+                     style="max-width: 50%; height: auto;">
+            </div>
+        </div>
         """
     )
 
-    with gr.Row():
-        gr.LoginButton(size="sm")
-
     with gr.Row():
         pdf_files = gr.File(
             file_count="multiple", label="Upload PDF(s)", file_types=["*.pdf"]
         )
+
     with gr.Row():
         sample_percentage = gr.Slider(
             minimum=0,
@@ -262,16 +271,21 @@ with gr.Blocks() as demo:
             label="Percentage of pages to sample per PDF",
             info="0% for no sampling (all pages), 100% for all pages",
         )
-        hf_repo = gr.Textbox(
-            label="Hugging Face Repo",
-            placeholder="username/repo-name",
-            info="Enter the Hugging Face repository name in the format 'username/repo-name'",
-        )
-    with gr.Row():
         create_zip = gr.Checkbox(label="Create ZIP file of images?", value=False)
-        private_repo = gr.Checkbox(label="Make repository private?", value=False)
+
+    with gr.Accordion("Hugging Face Upload Options", open=True):
+        gr.LoginButton(size="sm")
+        with gr.Row():
+            hf_repo = gr.Textbox(
+                label="Hugging Face Repo",
+                placeholder="username/repo-name",
+                info="Enter the Hugging Face repository name in the format 'username/repo-name'",
+            )
+            private_repo = gr.Checkbox(label="Make repository private?", value=False)
+
     with gr.Accordion("View converted images", open=False):
         output_gallery = gr.Gallery(label="Converted Images")
+
     status_text = gr.Markdown(label="Status")
     download_button = gr.File(label="Download Converted Images")