File size: 3,488 Bytes
ef53f13 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!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> |