mirror of
https://github.com/gradio-app/gradio.git
synced 2025-02-23 11:39:17 +08:00
Design changes to Playground (#6997)
* design changes to playground * formatting * add changeset * share your app * tweak * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Ali Abdalla
GitHub
parent
059e47eb62
commit
523c08fe30
6
.changeset/upset-crabs-turn.md
Normal file
6
.changeset/upset-crabs-turn.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@gradio/lite": patch
|
||||
"website": patch
|
||||
---
|
||||
|
||||
feat:Design changes to Playground
|
||||
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#abacaf" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#6d7787" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -1,5 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none">
|
||||
<g id="Communication / Share_iOS_Export">
|
||||
<path id="Vector" d="M9 6L12 3M12 3L15 6M12 3V13M7.00023 10C6.06835 10 5.60241 10 5.23486 10.1522C4.74481 10.3552 4.35523 10.7448 4.15224 11.2349C4 11.6024 4 12.0681 4 13V17.8C4 18.9201 4 19.4798 4.21799 19.9076C4.40973 20.2839 4.71547 20.5905 5.0918 20.7822C5.5192 21 6.07899 21 7.19691 21H16.8036C17.9215 21 18.4805 21 18.9079 20.7822C19.2842 20.5905 19.5905 20.2839 19.7822 19.9076C20 19.4802 20 18.921 20 17.8031V13C20 12.0681 19.9999 11.6024 19.8477 11.2349C19.6447 10.7448 19.2554 10.3552 18.7654 10.1522C18.3978 10 17.9319 10 17 10" stroke="#abacaf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector" d="M9 6L12 3M12 3L15 6M12 3V13M7.00023 10C6.06835 10 5.60241 10 5.23486 10.1522C4.74481 10.3552 4.35523 10.7448 4.15224 11.2349C4 11.6024 4 12.0681 4 13V17.8C4 18.9201 4 19.4798 4.21799 19.9076C4.40973 20.2839 4.71547 20.5905 5.0918 20.7822C5.5192 21 6.07899 21 7.19691 21H16.8036C17.9215 21 18.4805 21 18.9079 20.7822C19.2842 20.5905 19.5905 20.2839 19.7822 19.9076C20 19.4802 20 18.921 20 17.8031V13C20 12.0681 19.9999 11.6024 19.8477 11.2349C19.6447 10.7448 19.2554 10.3552 18.7654 10.1522C18.3978 10 17.9319 10 17 10" stroke="#4c5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 778 B After Width: | Height: | Size: 778 B |
@ -5,7 +5,7 @@
|
||||
import Fullscreen from "./icons/Fullscreen.svelte";
|
||||
import Close from "./icons/Close.svelte";
|
||||
import { page } from "$app/stores";
|
||||
import share from "$lib/assets/img/share_gray.svg";
|
||||
import share from "$lib/assets/img/anchor_gray.svg";
|
||||
import { svgCheck } from "$lib/assets/copy.js";
|
||||
import { browser } from "$app/environment";
|
||||
|
||||
@ -124,7 +124,25 @@
|
||||
/>
|
||||
<link rel="stylesheet" href="https://gradio-hello-world.hf.space/theme.css" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex flex-row" style="position: absolute; top: -6%; right: 0.4%">
|
||||
<button
|
||||
class="border border-gray-300 rounded-md mx-2 px-2 py-.5 my-[3px] text-md text-gray-600 hover:bg-gray-50 flex"
|
||||
on:click={() => copy_link(current_selection)}
|
||||
>
|
||||
{#if !copied_link}
|
||||
<img
|
||||
class="!w-5 align-text-top inline-block self-center mr-1"
|
||||
src={share}
|
||||
/>
|
||||
<p class="inline-block">Share Your App</p>
|
||||
{:else}
|
||||
<div class="inline-block align-text-top !w-5 self-center">
|
||||
{@html svgCheck}
|
||||
</div>
|
||||
<p class="inline-block">Copied Link!</p>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class=" absolute top-0 bottom-0 right-0"
|
||||
style="left:{show_nav ? 200 : 37}px"
|
||||
@ -139,22 +157,7 @@
|
||||
>
|
||||
<div class="flex justify-between align-middle h-8 border-b pl-4 pr-2">
|
||||
<h3 class="pt-1">Code</h3>
|
||||
<div class="flex float-right">
|
||||
<button
|
||||
class="border border-gray-300 rounded-md px-2 py-.5 my-[3px] text-sm text-gray-400 hover:bg-gray-50 w-36"
|
||||
on:click={() => copy_link(demo.name)}
|
||||
>
|
||||
{#if !copied_link}
|
||||
<img class="!w-4 align-text-top inline-block" src={share} />
|
||||
<p class="inline-block">Share With Edits</p>
|
||||
{:else}
|
||||
<div class="inline-block align-text-top !w-4">
|
||||
{@html svgCheck}
|
||||
</div>
|
||||
<p class="inline-block">Copied Link!</p>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex float-right"></div>
|
||||
</div>
|
||||
|
||||
<Code
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<footer
|
||||
class="container mx-auto flex-row flex items-center px-4 py-6 justify-between"
|
||||
class="main-footer container mx-auto flex-row flex items-center px-4 py-6 justify-between"
|
||||
>
|
||||
<a href="/">
|
||||
<img src={gradio_logo} alt="Gradio logo" />
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</script>
|
||||
|
||||
<!-- 4.0 Launch BANNER -->
|
||||
<div class="flex-row">
|
||||
<div class="main-header flex-row">
|
||||
<div
|
||||
class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gradient-to-r from-white via-yellow-200 to-white px-6 py-2 sm:px-3.5 sm:before:flex-1"
|
||||
>
|
||||
|
||||
@ -78,3 +78,12 @@
|
||||
<slot />
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
:global(
|
||||
body:has(.playground) .main-header,
|
||||
body:has(.playground) .main-footer
|
||||
) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import MetaTags from "$lib/components/MetaTags.svelte";
|
||||
import { page } from "$app/stores";
|
||||
import { browser } from "$app/environment";
|
||||
import { gradio_logo } from "$lib/assets";
|
||||
|
||||
export let data: {
|
||||
demos_by_category: {
|
||||
@ -40,36 +41,37 @@
|
||||
description="Play Around with Gradio Demos"
|
||||
/>
|
||||
|
||||
<main class="px-6 flex flex-col justify-between">
|
||||
<div class="container mx-auto px-4 gap-4">
|
||||
<h2
|
||||
class="text-4xl font-light mb-2 pt-2 text-orange-500 group container mx-auto gap-4"
|
||||
>
|
||||
Playground
|
||||
</h2>
|
||||
<p class="mt-4 mb-8 text-lg text-gray-600">
|
||||
All the demos on this page are interactive - meaning you can change the
|
||||
code and the embedded demo will update automatically. Use this as a space
|
||||
to explore and play around with Gradio. This is made possible thanks to
|
||||
the
|
||||
<a
|
||||
class="link text-black"
|
||||
target="_blank"
|
||||
href="https://gradio.app/guides/gradio-lite"
|
||||
>
|
||||
Gradio Lite
|
||||
<!-- 4.0 Launch BANNER -->
|
||||
<div class="flex-row">
|
||||
<div class="flex flex-row relative items-center px-1 py-1 pr-6 text-lg gap-8">
|
||||
<div class="flex">
|
||||
<a href="/">
|
||||
<img src={gradio_logo} alt="Gradio logo" />
|
||||
</a>
|
||||
package.
|
||||
</p>
|
||||
<p class="self-center text-xl font-light -m-1">Playground</p>
|
||||
</div>
|
||||
|
||||
<nav class="flex w-auto flex-row gap-6">
|
||||
<a class="thin-link flex items-center gap-3" href="/docs" target="_blank"
|
||||
><span>✍️</span> <span>Docs</span></a
|
||||
>
|
||||
<a
|
||||
class="thin-link flex items-center gap-3"
|
||||
href="/guides/gradio-lite"
|
||||
target="_blank"><span>💡</span> <span>Gradio Lite</span></a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="playground flex flex-col justify-between">
|
||||
<div class="container mx-auto px-4 gap-4">
|
||||
<p class="mt-4 mb-8 text-lg text-gray-600 md:hidden">
|
||||
Playground renders best on desktop.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full border border-gray-200 shadow-xl rounded-xl mb-3 h-full relative"
|
||||
>
|
||||
<div class="w-full border border-gray-200 shadow-xl h-full relative">
|
||||
<div
|
||||
class="w-[200px] h-full rounded-tr-none rounded-bl-xl overflow-y-scroll mb-0 p-0 pb-4 text-md block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip"
|
||||
style="word-break: normal; overflow-wrap: break-word; white-space:nowrap; width: {show_nav
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
import gradio as gr
|
||||
|
||||
def greet(name):
|
||||
return "Hello " + name + "!"
|
||||
return "Hello, " + name + "!"
|
||||
|
||||
gr.Interface(fn=greet, inputs="text", outputs="text").launch()
|
||||
`,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user