| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Gradio Documentation</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| </head> |
| <body> |
| <custom-navbar></custom-navbar> |
| |
| <div class="flex"> |
| <aside class="w-64 min-h-screen border-r p-4"> |
| <h3 class="font-bold mb-4">Documentation</h3> |
| <ul class="space-y-2"> |
| <li><a href="#installation" class="text-gray-600 hover:text-indigo-600">Installation</a></li> |
| <li><a href="#quickstart" class="text-gray-600 hover:text-indigo-600">Quickstart</a></li> |
| <li><a href="#interfaces" class="text-gray-600 hover:text-indigo-600">Interfaces</a></li> |
| <li><a href="#components" class="text-gray-600 hover:text-indigo-600">Components</a></li> |
| <li><a href="#deployment" class="text-gray-600 hover:text-indigo-600">Deployment</a></li> |
| </ul> |
| </aside> |
|
|
| <main class="flex-1 p-8"> |
| <section id="installation" class="mb-12"> |
| <h2 class="text-2xl font-bold mb-4">Installation</h2> |
| <p class="mb-4">Install Gradio using pip:</p> |
| <pre class="bg-gray-100 p-4 rounded mb-4"><code>pip install gradio</code></pre> |
| </section> |
|
|
| <section id="quickstart" class="mb-12"> |
| <h2 class="text-2xl font-bold mb-4">Quickstart</h2> |
| <p class="mb-4">Here's a simple Gradio app:</p> |
| <pre class="bg-gray-100 p-4 rounded mb-4"><code>import gradio as gr |
|
|
| def greet(name): |
| return "Hello " + name + "!" |
|
|
| demo = gr.Interface(fn=greet, inputs="text", outputs="text") |
| demo.launch()</code></pre> |
| </section> |
|
|
| <section id="interfaces" class="mb-12"> |
| <h2 class="text-2xl font-bold mb-4">Interfaces</h2> |
| <p class="mb-4">Gradio provides several types of interfaces:</p> |
| <ul class="list-disc pl-6 mb-4"> |
| <li class="mb-2"><strong>Interface</strong>: For simple input-output functions</li> |
| <li class="mb-2"><strong>TabbedInterface</strong>: For combining multiple interfaces</li> |
| <li class="mb-2"><strong>Parallel</strong>: For running multiple models in parallel</li> |
| </ul> |
| </section> |
|
|
| <section id="components" class="mb-12"> |
| <h2 class="text-2xl font-bold mb-4">Components</h2> |
| <p class="mb-4">Gradio comes with many built-in components:</p> |
| <ul class="list-disc pl-6 mb-4"> |
| <li class="mb-2"><strong>Textbox</strong>: For text input/output</li> |
| <li class="mb-2"><strong>Slider</strong>: For numerical input</li> |
| <li class="mb-2"><strong>Image</strong>: For image input/output</li> |
| <li class="mb-2"><strong>Audio</strong>: For audio input/output</li> |
| </ul> |
| </section> |
|
|
| <section id="deployment" class="mb-12"> |
| <h2 class="text-2xl font-bold mb-4">Deployment</h2> |
| <p class="mb-4">Deploy your Gradio app easily:</p> |
| <pre class="bg-gray-100 p-4 rounded mb-4"><code>demo.launch(share=True) # Get a public URL |
| # Or deploy to Hugging Face Spaces: |
| # https://huggingface.co/spaces</code></pre> |
| </section> |
| </main> |
| </div> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| </body> |
| </html> |
