mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-30 11:00:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Embedding the spaces on the landing page using web components (#1899)

Browse Source 
* convert from iframes to web components

* add copy buttons to codeblocks
This commit is contained in:
Ali Abdalla 2022-08-04 17:36:12 -07:00 committed by GitHub
parent 299ba1bd1a
commit 361837753c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
website/homepage/src/index/demos_template.html
View File

@ -24,7 +24,7 @@
</div>
<div class="container mx-auto mb-6 px-4 grid grid-cols-1">
<div class="demo space-y-2 md:col-span-3" demo="1">
<div class="rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
<div class="codeblock rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
<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>
@ -32,15 +32,12 @@
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>
</div>
<iframe src="https://hf.space/embed/gradio/pictionary/+?__theme=light"
frameBorder="0"
height="425"
scrolling="yes"
title="Gradio app"
class="container p-0 flex-grow m-0"></iframe>
<div class="mx-auto max-w-5xl">
<gradio-app space="gradio/pictionary"> </gradio-app>
</div>
</div>
<div class="demo space-y-2 md:col-span-3 hidden" demo="2">
<div class="rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
<div class="codeblock rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
<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>
@ -48,15 +45,12 @@ gr<span class="token punctuation">.</span>Interface<span class="token punctuatio
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>
</code></pre>
</div>
<iframe src="https://hf.space/embed/gradio/question-answering/+?__theme=light"
frameBorder="0"
height="425"
scrolling="yes"
title="Gradio app"
class="container p-0 flex-grow m-0"></iframe>
<div class="mx-auto max-w-5xl">
<gradio-app space="gradio/question-answering"> </gradio-app>
</div>
</div>
<div class="demo space-y-2 md:col-span-3 hidden" demo="3">
<div class="rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
<div class="codeblock rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
<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>
@ -64,29 +58,26 @@ gr<span class="token punctuation">.</span>Interface<span class="token punctuatio
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>
</code></pre>
</div>
<iframe src="https://hf.space/embed/gradio/Echocardiogram-Segmentation/+?__theme=light"
frameBorder="0"
height="425"
scrolling="yes"
title="Gradio app"
class="container p-0 flex-grow m-0"></iframe>
<div class="mx-auto max-w-5xl">
<gradio-app space="gradio/Echocardiogram-Segmentation"> </gradio-app>
</div>
</div>
<div class="demo space-y-2 md:col-span-3 hidden" demo="4">
<div class="rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
<div class="codeblock rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
<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">same_or_different</span><span class="token punctuation">(</span>audio1<span class="token punctuation">,</span> audio2<span class="token punctuation">)</span><span class="token punctuation">:</span>
<span class="token keyword">pass </span><span class="token comment"> # Generate a response depending on if audio1 and audio2 are spoken by same person or not</span>
gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>same_or_different<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"audio"</span><span class="token punctuation">,</span> <span class="token string">"audio"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"html"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre>
</div>
<iframe src="https://hf.space/embed/gradio/same-person-or-different/+?__theme=light"
frameBorder="0"
height="425"
scrolling="yes"
title="Gradio app"
class="container p-0 flex-grow m-0"></iframe>
<div class="mx-auto max-w-5xl">
<gradio-app space="gradio/same-person-or-different"> </gradio-app>
</div>
</div>
</div>
<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.1.1/gradio.js"></script>
<script src="/assets/add_copy.js"></script>
<script>
let load_demo = demo_id => {
document.querySelectorAll(".demo-tab").forEach(e => {