|
|
<!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> |
