gradio/js/lite/index.html
Ali Abdalla f739bef6c7
Add Playground to Lite Custom Element (#7660)
* lite playground changes

* add changeset

* formatting

* index

* fix tests

* fixes

* add changeset

* styling changes

* code parsing

* formatting

* remove tailiwnd

* add shortcut

* formatting

* linting

* formatting

* snake case

* typing

* try fix

* remove import

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: Hannah <hannahblair@users.noreply.github.com>
2024-03-19 11:49:21 -07:00

123 lines
2.9 KiB
HTML

<!doctype html>
<!-- A demo HTML file to test the bundled JS and CSS files -->
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<script type="module" crossorigin src="./dist/lite.js"></script>
<link rel="stylesheet" href="./dist/lite.css" />
</head>
<body style="padding: 10px; height: 100%; width: 100%">
<h1>Lorem Ipsum Dolor</h1>
<p>
<strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.
Nullam vitae est maximus,
<a href="https://example.com">link to example</a>, vestibulum lorem quis,
vehicula nunc.
</p>
<h2>Subheading: Curabitur blandit</h2>
<p>
Curabitur blandit tempus porttitor.
<em>Etiam porta sem malesuada</em> magna mollis euismod. Donec ullamcorper
nulla non metus auctor fringilla.
</p>
<h3>Subsection: Vestibulum</h3>
<p>
Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur
est at lobortis.
</p>
<blockquote>Cras mattis consectetur purus sit amet fermentum.</blockquote>
<pre><code>// Sample code block
function helloWorld() {
console.log("Hello, world!");
}
helloWorld();
</code></pre>
<ul>
<li>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</li>
<li>
Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</li>
</ul>
<p>
<b>Bolded text:</b> Duis mollis, est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem nec elit.
</p>
<h4>Further Information</h4>
<p>
For more details, visit
<a href="https://example.com/moreinfo">our information page</a>.
</p>
<gradio-lite playground>
import gradio as gr gr.Interface(fn=lambda x: x, inputs=gr.Textbox(),
outputs=gr.Textbox()).launch()
</gradio-lite>
<h3>Subsection: Vestibulum</h3>
<p>
Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur
est at lobortis.
</p>
<blockquote>Cras mattis consectetur purus sit amet fermentum.</blockquote>
<pre><code>// Sample code block
function helloWorld() {
console.log("Hello, world!");
}
helloWorld();
</code></pre>
<ul>
<li>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</li>
<li>
Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</li>
</ul>
<p>
<b>Bolded text:</b> Duis mollis, est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem nec elit.
</p>
<h4>Further Information</h4>
<p>
For more details, visit
<a href="https://example.com/moreinfo">our information page</a>.
</p>
<gradio-lite playground>
import gradio as gr gr.ChatInterface(lambda x,y:x).launch()
</gradio-lite>
</body>
</html>