mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-12-03 01:50:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

homepage demo update (#5186)

Browse Source 
* homepage demo update

* add changeset

* Fix spacing

* Switch demo order

* asd (#5191)

* asd (#5192)

* homepage demo update

* Fix spacing

* add changeset

* Switch demo order

* remove endocardiogram

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: pngwn <hello@pngwn.io>
This commit is contained in:
Freddy Boulton 2023-08-11 19:04:49 -04:00 committed by GitHub
parent 7334a4b182
commit 24b66e1cff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/young-olives-yell.md Normal file
View File

@ -0,0 +1,5 @@
---
"website": minor
---
feat:homepage demo update

18
js/_website/src/lib/assets/demo_code.js
View File

@ -1,20 +1,20 @@
export const sketch = `<pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
<span class="token keyword">def</span> <span class="token function">sketch_recognition</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">:</span>
<span class="token keyword">pass</span><span class="token comment"># Implement your sketch recognition model here...</span>
<span class="token keyword">pass</span><span class="token comment"> # Implement your sketch recognition model here...</span>
gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>sketch_recognition<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"sketchpad"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"label"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>`;
export const q_a = `<pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
<span class="token keyword">def</span> <span class="token function">question_answer</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> question<span class="token punctuation">)</span><span class="token punctuation">:</span>
<span class="token keyword">pass </span><span class="token comment"> # Implement your question-answering model here...</span>
export const chat = `<pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
<span class="token keyword">def</span> <span class="token function">chat</span><span class="token punctuation">(</span>message<span class="token punctuation">, </span>history<span class="token punctuation"></span>)<span class="token punctuation">:</span>
<span class="token keyword">pass </span><span class="token comment"> # Implement your chatbot here...</span>
gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>question_answer<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"text"</span><span class="token punctuation">],</span> outputs<span class="token operator">=</span>[</span><span class="token string">"textbox"</span><span class="token punctuation">,</span> <span class="token string">"text"</span><span class="token punctuation">]).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
gr<span class="token punctuation">.</span>ChatInterface<span class="token punctuation">(</span>fn<span class="token operator">=</span>chat<span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>`;
export const img = `<pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
<span class="token keyword">def</span> <span class="token function">segment</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">:</span>
<span class="token keyword">pass </span><span class="token comment"> # Implement your image segmentation model here...</span>
export const stable_diffusion = `<pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
<span class="token keyword">def</span> <span class="token function">generate</span><span class="token punctuation">(</span>prompt<span class="token punctuation">)</span><span class="token punctuation">:</span>
<span class="token keyword">pass </span><span class="token comment"> # Implement your image generation model here...</span>
gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>segment<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>generate<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"prompt"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>`;

20
js/_website/src/lib/components/DemosLanding.svelte
View File

@ -1,17 +1,16 @@
<script lang="ts">
import { q_a, img, sketch } from "../assets/demo_code";
import { stable_diffusion, sketch, chat } from "../assets/demo_code";
let tabs = [
{ title: "Sketch Recognition", code: sketch, demo: "gradio/pictionary" },
{
title: "Question Answering",
code: q_a,
demo: "gradio/question-answering"
title: "Sketch Recognition",
code: sketch,
demo: "gradio/pictionary"
},
{
title: "Image Segmentation",
code: img,
demo: "gradio/Echocardiogram-Segmentation"
title: "Stable Diffusion",
code: stable_diffusion,
demo: "hysts/SD-XL"
},
{
title: "Time Series Forecasting",
@ -22,6 +21,11 @@
title: "XGBoost with Explainability",
code: false,
demo: "gradio/xgboost-income-prediction-with-explainability"
},
{
title: "Chat with Llama 2",
code: chat,
demo: "ysharma/Explore_llamav2_with_TGI"
}
];

4
js/_website/src/routes/+page.svelte
View File

@ -128,8 +128,8 @@
to your project.
</p>
<p class="text-gray-600">
You can choose from a variety of interface types to interface your
function.
Seamlessly use any python library on your computer. If you can write a
python function, gradio can run it.
</p>
</div>
<div