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

restore theme (#547)

Browse Source 
* restore theme

* fix test

Co-authored-by: Ali Abid <aliabid94@gmail.com>
This commit is contained in:
aliabid94 2022-02-04 14:46:22 -08:00 committed by GitHub
parent 4bee781da4
commit 7320022de1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 474 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/Interface.svelte
View File

@ -8,6 +8,11 @@
import { deepCopy } from "./components/utils/helpers.js";
import ExampleSet from "./ExampleSet.svelte";
import huggingface_theme from "./themes/huggingface.scss";
import grass_theme from "./themes/grass.scss";
import peach_theme from "./themes/peach.scss";
import seafoam_theme from "./themes/seafoam.scss";
export let input_components,
output_components,
theme,

3
frontend/src/components/input/Image/Component.svelte
View File

@ -22,9 +22,8 @@
<div class="input-image">
<div
class="image-preview w-full h-80 flex justify-center items-center dark:bg-gray-600 relative"
class="image-preview w-full h-60 flex justify-center items-center dark:bg-gray-600 relative"
class:bg-gray-200={value}
class:h-80={source !== "webcam"}
>
{#if source === "canvas"}
<ModifySketch

120
frontend/src/themes/grass.scss Normal file
View File

@ -0,0 +1,120 @@
.gradio-bg[theme="grass"] {
@apply dark:bg-gray-700;
}
.gradio-bg[theme="grass"] .gradio-interface {
.component-set {
@apply bg-gray-50 dark:bg-gray-800 rounded-none;
}
.component {
@apply p-1 transition;
}
.panel-header {
@apply text-gray-400 dark:text-gray-200 font-semibold;
}
.panel-button {
@apply rounded-none bg-gray-100 dark:bg-gray-800 shadow;
}
.panel-button.submit {
@apply bg-green-400 text-white;
}
.examples {
.examples-holder:not(.gallery) {
.examples-table {
@apply dark:bg-gray-800;
tbody tr:hover {
@apply bg-green-400;
}
}
}
.examples-holder.gallery .examples-table {
.example {
@apply dark:bg-gray-800;
}
.example:hover {
@apply bg-green-400;
}
}
}
/* Input Components */
.input-text {
@apply rounded-none dark:bg-gray-700 dark:text-gray-50 box-border border-4 p-2 border-white dark:border-gray-600 focus:border-green-400 dark:focus:border-green-400;
}
.input-number {
@apply rounded-none dark:bg-gray-700 dark:text-gray-50 box-border border-4 p-2 border-white dark:border-gray-600 focus:border-green-400 dark:focus:border-green-400;
}
.input-slider {
.range {
@apply dark:bg-gray-700 rounded-none;
}
.range::-webkit-slider-thumb {
@apply bg-green-400 rounded-none shadow-sm;
}
.range::-moz-range-thumb {
@apply bg-green-400 rounded-none shadow-sm;
}
.value {
@apply font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-50;
}
}
.input-radio {
.radio-item {
@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
}
.radio-circle {
@apply hidden;
}
.radio-item.selected {
@apply bg-green-400 text-white shadow;
}
.radio-circle {
@apply w-4 h-4 bg-white transition rounded-full box-border;
}
}
.input-checkbox-group,
.input-checkbox {
.checkbox-item {
@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
}
.checkbox-item.selected {
@apply bg-green-400 text-white shadow;
}
}
.input-checkbox {
.checkbox {
@apply bg-gray-200;
}
.selected .checkbox {
@apply bg-green-500;
}
}
.input-checkbox-group .checkbox {
@apply hidden;
}
.input-dropdown {
.selector {
@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
}
.dropdown-menu {
@apply shadow;
}
.dropdown-item {
@apply bg-gray-100 dark:bg-gray-800 hover:bg-green-400 hover:text-gray-50 hover:font-semibold;
}
.dropdown-item:first-child,
.dropdown-item:last-child {
@apply rounded-none;
}
}
/* Components */
.output-label {
.confidence {
@apply bg-gray-300 text-white dark:bg-gray-600 font-semibold;
}
.confidence:first-child {
@apply bg-green-400;
}
}
}

124
frontend/src/themes/huggingface.scss Normal file
View File

@ -0,0 +1,124 @@
.gradio-bg[theme="huggingface"] {
@apply dark:bg-[#0b0f19];
}
.gradio-bg[theme="huggingface"] .gradio-interface {
.load-status {
@apply text-gray-700;
}
.component-set {
@apply from-gray-50 to-white dark:from-gray-700 dark:to-gray-800 bg-gradient-to-br border border-gray-100 dark:border-none p-4 rounded-lg gap-3;
}
.panel-header {
@apply flex items-center text-sm text-gray-700 dark:text-gray-50 mb-1.5;
}
.panel-button {
@apply from-gray-50 hover:from-gray-100 to-gray-100 bg-gradient-to-b focus:ring-offset-indigo-300 dark:from-gray-700 dark:hover:from-gray-800 dark:to-gray-800 dark:focus:ring-offset-indigo-700 dark:border-none shadow-sm border rounded-lg;
}
.examples {
.examples-holder:not(.gallery) .examples-table {
@apply dark:from-gray-700 dark:to-gray-800 bg-gradient-to-br;
thead {
@apply border-gray-100 dark:border-gray-600;
}
tbody tr:hover {
@apply bg-indigo-500 dark:bg-indigo-900 text-white;
}
}
.examples-holder.gallery .examples-table {
.example:hover {
@apply bg-indigo-500 dark:bg-indigo-900 text-white;
}
}
}
/* Common Classes */
.modify-upload {
@apply p-1 gap-1;
button {
@apply rounded-full;
}
.edit {
@apply bg-indigo-400 hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400;
}
.clear {
@apply bg-gray-300 hover:bg-gray-400 dark:bg-gray-400 dark:hover:bg-gray-300;
}
}
/* Input Components */
.input-text {
@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:border-none;
}
.input-number {
@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:border-none;
}
.input-radio {
.radio-item {
@apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none;
}
.radio-item.selected {
@apply text-indigo-500 dark:text-white dark:from-indigo-600 dark:to-indigo-500;
}
.radio-circle {
@apply bg-white;
}
.selected .radio-circle {
@apply border-4 border-indigo-600 dark:border-indigo-400;
}
}
.input-checkbox-group,
.input-checkbox {
.checkbox-item {
@apply border bg-gradient-to-t from-gray-100 to-gray-50 hover:to-gray-100 text-gray-600 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none py-1.5 px-3;
}
.checkbox-item.selected {
@apply text-indigo-500 dark:text-white dark:from-indigo-600 dark:to-indigo-500;
}
.selected .checkbox {
@apply bg-indigo-600 dark:bg-indigo-400;
}
}
.input-dropdown {
.selector {
@apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none py-1.5 px-3 hover:to-gray-100;
}
.dropdown-item {
@apply bg-gray-50 dark:bg-gray-500 hover:bg-gray-400 hover:text-gray-50 dark:hover:bg-indigo-600;
}
}
.input-slider {
@apply text-center;
.range {
@apply bg-white hover:bg-gray-100 dark:bg-gray-600 rounded-full border dark:border-none;
}
.range::-webkit-slider-thumb {
@apply border dark:bg-white bg-indigo-500 rounded-full shadow;
}
.range::-moz-range-thumb {
@apply border dark:bg-white bg-indigo-500 rounded-full shadow;
}
.value {
@apply bg-gray-100 text-gray-700 dark:text-gray-50 dark:bg-gray-600 dark:border-none shadow-inner;
}
}
.input-audio {
.start {
@apply bg-gradient-to-t border from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none;
}
.stop {
@apply border border-red-200 bg-gradient-to-t from-red-200 to-red-50 text-red-600 py-1.5 px-3 hover:to-red-100 dark:from-red-700 dark:to-red-600 dark:text-red-100;
}
}
/* Output Components */
.output-text {
@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner whitespace-pre-wrap dark:bg-gray-600 dark:border-none;
}
.output-label {
.output-class {
@apply hidden;
}
.confidence {
@apply bg-gradient-to-r from-indigo-200 to-indigo-500 dark:from-indigo-500 dark:to-indigo-700 rounded text-white;
color: transparent;
}
}
}

108
frontend/src/themes/peach.scss Normal file
View File

@ -0,0 +1,108 @@
.gradio-bg[theme="peach"] {
@apply bg-gradient-to-r from-red-50 to-yellow-100 dark:from-gray-900 dark:to-gray-800;
}
.gradio-bg[theme="peach"] .gradio-interface {
.component-set {
@apply bg-white dark:bg-gray-800 rounded-lg;
}
.component {
@apply p-1 transition;
}
.panel-header {
@apply text-gray-600 dark:text-gray-200 font-semibold;
}
.panel-button {
@apply rounded-lg bg-white dark:bg-gray-800 shadow;
}
.panel-button.submit {
@apply text-white bg-gradient-to-tr from-red-500 to-yellow-400;
}
.examples {
.examples-holder:not(.gallery) {
.examples-table {
@apply bg-white dark:bg-gray-800;
tbody tr:hover {
@apply bg-yellow-500 dark:bg-red-800;
}
}
}
.examples-table-holder.gallery .examples-table {
.example {
@apply bg-white dark:bg-gray-800;
}
.example:hover {
@apply bg-yellow-500 dark:bg-red-800;
}
}
}
/* Input Components */
.input-text {
@apply rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-50;
}
.input-number {
@apply rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-50;
}
.input-slider {
.range {
@apply bg-gray-50 dark:bg-gray-700 rounded-lg;
}
.range::-webkit-slider-thumb {
@apply bg-gradient-to-tr from-red-500 to-yellow-400 rounded-lg shadow-sm;
}
.range::-moz-range-thumb {
@apply bg-gradient-to-tr from-red-500 to-yellow-400 rounded-lg shadow-sm;
}
.value {
@apply font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-50;
}
}
.input-radio {
.radio-item {
@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
}
.radio-item.selected {
@apply bg-gradient-to-tr from-red-500 to-yellow-400 text-white shadow;
}
.radio-circle {
@apply w-4 h-4 bg-white transition rounded-full box-border;
}
}
.input-checkbox-group,
.input-checkbox {
.checkbox-item {
@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
}
.checkbox-item.selected {
@apply bg-gradient-to-tr from-red-500 to-yellow-400 text-white shadow;
}
.selected .checkbox {
@apply bg-gray-200 bg-opacity-20;
}
}
.input-dropdown {
.selector {
@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
}
.dropdown-menu {
@apply shadow;
}
.dropdown-item {
@apply bg-gray-100 dark:bg-gray-800 hover:bg-red-500 hover:text-gray-50 hover:font-semibold;
}
.dropdown-item:first-child,
.dropdown-item:last-child {
@apply rounded-lg;
}
}
/* Components */
.output-label {
.confidence {
@apply bg-gray-300 text-white dark:bg-gray-600 font-semibold rounded-lg;
}
.confidence:first-child {
@apply bg-gradient-to-tr from-red-500 to-yellow-400;
}
}
}

116
frontend/src/themes/seafoam.scss Normal file
View File

@ -0,0 +1,116 @@
.gradio-bg[theme="seafoam"] {
@apply bg-yellow-100 dark:bg-gray-700;
}
.gradio-bg[theme="seafoam"] .gradio-interface {
.component-set {
@apply p-0;
}
.component {
@apply p-2 transition bg-white dark:bg-gray-800 shadow-sm;
}
.component:hover .panel-header {
@apply text-green-400 text-base;
}
.panel-header {
@apply text-sm h-6 text-gray-400 dark:text-gray-200 transition-all font-semibold;
}
.panel-button {
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 hover:to-green-400 text-white shadow;
}
.examples {
.examples-holder:not(.gallery) {
.examples-table {
@apply dark:bg-gray-800;
tbody tr:hover {
@apply bg-blue-400 dark:bg-blue-500;
}
}
}
.examples-holder.gallery .examples-table {
.example {
@apply dark:bg-gray-800;
}
.example:hover {
@apply bg-blue-400 dark:bg-blue-500;
}
}
}
/* Common Classes */
.edit,
.clear {
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 hover:to-green-400 text-white;
}
/* Input Components */
.input-text {
@apply rounded-none bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
}
.input-number {
@apply rounded-none bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
}
.input-slider {
.range {
@apply bg-gray-50 dark:bg-gray-700 rounded-none;
}
.range::-webkit-slider-thumb {
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 shadow-sm;
}
.range::-moz-range-thumb {
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 shadow-sm;
}
.value {
@apply bg-gray-50 font-semibold text-blue-400 dark:bg-gray-700 dark:text-gray-50;
}
}
.input-radio {
.radio-item {
@apply bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
}
.radio-circle {
@apply bg-gray-50 dark:bg-gray-400 border-4 border-gray-200 dark:border-gray-600;
}
.radio-item.selected {
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 text-white shadow;
}
.radio-circle {
@apply w-4 h-4 bg-white transition rounded-full box-border;
}
.selected .radio-circle {
@apply border-gray-400 opacity-40;
}
}
.input-checkbox-group,
.input-checkbox {
.checkbox-item {
@apply bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
}
.checkbox-item.selected {
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 text-white shadow;
}
.selected .checkbox {
@apply bg-gray-400 bg-opacity-40;
}
}
.input-dropdown {
.selector {
@apply bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
}
.dropdown-menu {
@apply shadow;
}
.dropdown-item {
@apply bg-white dark:bg-gray-800 hover:bg-blue-400 hover:text-gray-50 hover:font-semibold;
}
}
/* Output Components */
.output-label {
.confidence {
@apply bg-gradient-to-t from-gray-400 to-gray-300 dark:from-gray-500 dark:to-gray-400 text-white rounded font-semibold;
}
.confidence:first-child {
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500;
}
}
}

BIN
test/golden/image_mod/cheetah1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 KiB

After

Width:  |  Height:  |  Size: 236 KiB