Add tab in Gradio UI

app.py

@@ -3,11 +3,11 @@ import gradio as gr
 
 MODAL_API_URL = "https://agents-mcp-hackathon--auto-readme-agent-fastapi-app.modal.run"
 
-def generate_readme(query):
+def generate_readme(repo_url):
     try:
         response = requests.post(
             MODAL_API_URL,
-            json={"query": query},
+            json={"repo_url": repo_url},
             timeout=120
         )
         if response.status_code == 200:
@@ -16,42 +16,112 @@ def generate_readme(query):
             return f"Error: {response.status_code}\n{response.text}"
     except Exception as e:
         return f"Exception: {str(e)}"
-    
+
+DEFAULT_VALUE = (
+    "## Hello, World!\n"
+    "Regardless of the outcome, it was **a truly informative and enjoyable hackathon.**   \n"
+    "As someone who likes and is good at using Hugging Face, I hope there will be more opportunities like this! 🤗"
+)
+
 with gr.Blocks() as demo:
     gr.HTML("<h1 style='text-align:center;'>🤖 ARA: Auto README.md Agent 📝</h1>")
-    repo_input = gr.Textbox(
-        label="GitHub Repository URL",
-        placeholder="Enter the GitHub repository URL (e.g. https://github.com/username/repo)"
-    )
+    with gr.Tabs():
+        with gr.TabItem("README Generator"):
+            repo_input = gr.Textbox(
+                label="GitHub Repository URL",
+                placeholder="Enter the GitHub repository URL (e.g. https://github.com/username/repo)"
+            )
+            generate_btn = gr.Button("Generate README.md")
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.Markdown("### 📝 Draft")
+                    readme_preview = gr.Textbox(
+                        lines=24,
+                        label="Generated by agent",
+                        interactive=True,
+                        value=DEFAULT_VALUE
+                    )
+                with gr.Column(scale=1):
+                    gr.Markdown("### 🖼️ Preview")
+                    readme_markdown = gr.Markdown(value=DEFAULT_VALUE, show_copy_button=True)
+            generate_btn.click(
+                generate_readme,
+                inputs=repo_input,
+                outputs=readme_preview
+            )
+            readme_preview.change(
+                lambda md: md,
+                inputs=readme_preview,
+                outputs=readme_markdown
+            )
+        with gr.TabItem("Demo Video"):
+            gr.Markdown("### Demo Video")
+            gr.Video("https://www.youtube.com/watch?v=dQw4w9WgXcQ")
+        with gr.TabItem("About"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.Markdown("### Service Description")
+                    gr.Textbox(
+                        value="This service generates README.md files for GitHub repositories using AI agents.",
+                        lines=8,
+                        interactive=False
+                    )
+                with gr.Column(scale=1):
+                    gr.Markdown("### Features")
+                    gr.Textbox(
+                        value="- Generate README.md from GitHub repo\n- Preview generated README\n- Demo video included",
+                        lines=4,
+                        interactive=False
+                    )
+                    gr.Markdown("### Future Features")
+                    gr.Textbox(
+                        value="- Support for multiple branches\n- Enhanced code analysis\n- User authentication",
+                        lines=4,
+                        interactive=False
+                    )
+                        
+# with gr.Blocks() as demo:
+#     gr.HTML("<h1 style='text-align:center;'>🤖 ARA: Auto README.md Agent 📝</h1>")
+#     repo_input = gr.Textbox(
+#         label="GitHub Repository URL",
+#         placeholder="Enter the GitHub repository URL (e.g. https://github.com/username/repo)"
+#     )
     
-    generate_btn = gr.Button("Generate README.md")
+#     generate_btn = gr.Button("Generate README.md")
     
-    DEFAULT_VALUE = "## Hello, World!\nRegardless of the hackathon result, it was **a truly informative and enjoyable hackathon.**   \nAs someone who likes and is good at using Hugging Face, I hope there will be more opportunities like this! 🤗"
+#     DEFAULT_VALUE = (
+#         "## Hello, World!\n"
+#         "Regardless of the outcome, it was **a truly informative and enjoyable hackathon.**   \n"
+#         "As someone who likes and is good at using Hugging Face, I hope there will be more opportunities like this! 🤗"
+#     )
     
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("#### 🖼️ Preview (Markdown Rendered)")
-            readme_preview = gr.Textbox(
-                lines=24,
-                label="Preview (Markdown Rendered)",
-                interactive=True,
-                value=DEFAULT_VALUE
-            )
-        with gr.Column():
-            gr.Markdown("#### 📝 Markdown Rendered Preview")
-            readme_markdown = gr.Markdown(value=DEFAULT_VALUE, show_copy_button=True)
+#     with gr.Row():
+#         with gr.Column():
+#             gr.Markdown("### 📝 Draft")
+#             readme_preview = gr.Textbox(
+#                 lines=24,
+#                 label="Generated by agent",
+#                 interactive=True,
+#                 value=DEFAULT_VALUE
+#             )
+#         with gr.Column():
+#             gr.Markdown("### 🖼️ Preview")
+#             readme_markdown = gr.Markdown(value=DEFAULT_VALUE, show_copy_button=True)
 
-    generate_btn.click(
-        generate_readme,
-        inputs=repo_input,
-        outputs=readme_preview
-    )
+#     generate_btn.click(
+#         generate_readme,
+#         inputs=repo_input,
+#         outputs=readme_preview
+#     )
 
-    readme_preview.change(
-        lambda md: md,
-        inputs=readme_preview,
-        outputs=readme_markdown
-    )
+#     readme_preview.change(
+#         lambda md: md,
+#         inputs=readme_preview,
+#         outputs=readme_markdown
+#     )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()
+    
+    #Error: 422
+#{"detail":[{"type":"missing","loc":["body","repo_url"],"msg":"Field required","input":{"query":"https://github.com/nsbg/nsbg.github.io"}}]}