mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-18 10:44:33 +08:00
Improved index page
This commit is contained in:
Abubakar Abid
parent
cd53f6fc2a
commit
9d6c480f44
@ -2,14 +2,9 @@
|
|||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="ChangeListManager">
|
<component name="ChangeListManager">
|
||||||
<list default="true" id="fd73cd66-e80f-470e-a2ec-e220d3b6b864" name="Default Changelist" comment="">
|
<list default="true" id="fd73cd66-e80f-470e-a2ec-e220d3b6b864" name="Default Changelist" comment="">
|
||||||
<change afterPath="$PROJECT_DIR$/.idea/gradiome.iml" afterDir="false" />
|
|
||||||
<change afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" />
|
|
||||||
<change afterPath="$PROJECT_DIR$/.idea/modules.xml" afterDir="false" />
|
|
||||||
<change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
|
|
||||||
<change afterPath="$PROJECT_DIR$/js/draw-a-digit.js" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/css/starter-template.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/draw-a-digit.css" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/css/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/index.css" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/templates/draw_a_digit.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/draw_a_digit.html" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
|
||||||
</list>
|
</list>
|
||||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||||
<option name="SHOW_DIALOG" value="false" />
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
@ -21,11 +16,12 @@
|
|||||||
<session id="-278724352">
|
<session id="-278724352">
|
||||||
<usages-collector id="statistics.lifecycle.project">
|
<usages-collector id="statistics.lifecycle.project">
|
||||||
<counts>
|
<counts>
|
||||||
<entry key="project.closed" value="2" />
|
<entry key="project.closed" value="4" />
|
||||||
<entry key="project.open.time.0" value="1" />
|
<entry key="project.open.time.0" value="1" />
|
||||||
<entry key="project.open.time.1" value="1" />
|
<entry key="project.open.time.1" value="2" />
|
||||||
<entry key="project.open.time.16" value="1" />
|
<entry key="project.open.time.16" value="2" />
|
||||||
<entry key="project.opened" value="3" />
|
<entry key="project.open.time.23" value="1" />
|
||||||
|
<entry key="project.opened" value="6" />
|
||||||
</counts>
|
</counts>
|
||||||
</usages-collector>
|
</usages-collector>
|
||||||
<usages-collector id="statistics.file.extensions.open">
|
<usages-collector id="statistics.file.extensions.open">
|
||||||
@ -46,16 +42,16 @@
|
|||||||
</usages-collector>
|
</usages-collector>
|
||||||
<usages-collector id="statistics.file.extensions.edit">
|
<usages-collector id="statistics.file.extensions.edit">
|
||||||
<counts>
|
<counts>
|
||||||
<entry key="css" value="27" />
|
<entry key="css" value="260" />
|
||||||
<entry key="html" value="2526" />
|
<entry key="html" value="4877" />
|
||||||
<entry key="js" value="4" />
|
<entry key="js" value="4" />
|
||||||
<entry key="py" value="2465" />
|
<entry key="py" value="2465" />
|
||||||
</counts>
|
</counts>
|
||||||
</usages-collector>
|
</usages-collector>
|
||||||
<usages-collector id="statistics.file.types.edit">
|
<usages-collector id="statistics.file.types.edit">
|
||||||
<counts>
|
<counts>
|
||||||
<entry key="CSS" value="27" />
|
<entry key="CSS" value="260" />
|
||||||
<entry key="HTML" value="2526" />
|
<entry key="HTML" value="4877" />
|
||||||
<entry key="JavaScript" value="4" />
|
<entry key="JavaScript" value="4" />
|
||||||
<entry key="Python" value="2465" />
|
<entry key="Python" value="2465" />
|
||||||
</counts>
|
</counts>
|
||||||
@ -69,10 +65,6 @@
|
|||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="255">
|
<state relative-caret-position="255">
|
||||||
<caret line="15" selection-start-line="14" selection-end-line="15" />
|
<caret line="15" selection-start-line="14" selection-end-line="15" />
|
||||||
<folding>
|
|
||||||
<element signature="e#3443#3449#0" expanded="true" />
|
|
||||||
<element signature="e#3456#3462#0" expanded="true" />
|
|
||||||
</folding>
|
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
</entry>
|
</entry>
|
||||||
@ -80,11 +72,16 @@
|
|||||||
<file pinned="false" current-in-tab="true">
|
<file pinned="false" current-in-tab="true">
|
||||||
<entry file="file://$PROJECT_DIR$/index.html">
|
<entry file="file://$PROJECT_DIR$/index.html">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="302">
|
<state relative-caret-position="631">
|
||||||
<caret line="114" column="189" lean-forward="true" selection-start-line="114" selection-start-column="189" selection-end-line="114" selection-end-column="189" />
|
<caret line="217" selection-start-line="202" selection-end-line="217" />
|
||||||
<folding>
|
<folding>
|
||||||
<element signature="e#13772#13778#0" expanded="true" />
|
<element signature="n#style#0;n#nav#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||||
<element signature="e#14042#14048#0" expanded="true" />
|
<element signature="n#style#0;n#a#0;n#nav#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#li#0;n#ul#1;n#div#0;n#nav#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#p#0;n#div#0;n#section#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="e#6507#6513#0" expanded="true" />
|
||||||
|
<element signature="e#6658#6664#0" expanded="true" />
|
||||||
|
<element signature="e#7106#7112#0" expanded="true" />
|
||||||
</folding>
|
</folding>
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
@ -104,8 +101,8 @@
|
|||||||
<file pinned="false" current-in-tab="false">
|
<file pinned="false" current-in-tab="false">
|
||||||
<entry file="file://$PROJECT_DIR$/css/draw-a-digit.css">
|
<entry file="file://$PROJECT_DIR$/css/draw-a-digit.css">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="306">
|
<state relative-caret-position="102">
|
||||||
<caret line="18" selection-start-line="18" selection-end-line="51" />
|
<caret line="6" column="1" lean-forward="true" selection-start-line="6" selection-start-column="1" selection-end-line="6" selection-end-column="1" />
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
</entry>
|
</entry>
|
||||||
@ -113,8 +110,8 @@
|
|||||||
<file pinned="false" current-in-tab="false">
|
<file pinned="false" current-in-tab="false">
|
||||||
<entry file="file://$PROJECT_DIR$/css/index.css">
|
<entry file="file://$PROJECT_DIR$/css/index.css">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="773">
|
<state relative-caret-position="476">
|
||||||
<caret line="71" selection-start-line="71" selection-end-line="71" />
|
<caret line="28" column="11" selection-start-line="28" selection-start-column="11" selection-end-line="28" selection-end-column="11" />
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
</entry>
|
</entry>
|
||||||
@ -130,15 +127,6 @@
|
|||||||
</component>
|
</component>
|
||||||
<component name="FindInProjectRecents">
|
<component name="FindInProjectRecents">
|
||||||
<findStrings>
|
<findStrings>
|
||||||
<find>templ</find>
|
|
||||||
<find>/css</find>
|
|
||||||
<find>bootstr</find>
|
|
||||||
<find>favi</find>
|
|
||||||
<find>red</find>
|
|
||||||
<find>search</find>
|
|
||||||
<find>HOME</find>
|
|
||||||
<find>D</find>
|
|
||||||
<find>567</find>
|
|
||||||
<find>fff</find>
|
<find>fff</find>
|
||||||
<find>canvas</find>
|
<find>canvas</find>
|
||||||
<find>#888</find>
|
<find>#888</find>
|
||||||
@ -160,6 +148,15 @@
|
|||||||
<find>album ex</find>
|
<find>album ex</find>
|
||||||
<find>9 mi</find>
|
<find>9 mi</find>
|
||||||
<find>Edit</find>
|
<find>Edit</find>
|
||||||
|
<find>button</find>
|
||||||
|
<find>see an ex</find>
|
||||||
|
<find>jumobo</find>
|
||||||
|
<find>jumbotron</find>
|
||||||
|
<find>Silicon s</find>
|
||||||
|
<find>lead</find>
|
||||||
|
<find>draw a</find>
|
||||||
|
<find>see an</find>
|
||||||
|
<find>pip ins</find>
|
||||||
</findStrings>
|
</findStrings>
|
||||||
<replaceStrings>
|
<replaceStrings>
|
||||||
<replace>400</replace>
|
<replace>400</replace>
|
||||||
@ -268,10 +265,10 @@
|
|||||||
<servers />
|
<servers />
|
||||||
</component>
|
</component>
|
||||||
<component name="ToolWindowManager">
|
<component name="ToolWindowManager">
|
||||||
<frame x="-6" y="-6" width="1513" height="1013" extended-state="6" />
|
<frame x="-8" y="-8" width="2576" height="1096" extended-state="6" />
|
||||||
<editor active="true" />
|
<editor active="true" />
|
||||||
<layout>
|
<layout>
|
||||||
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24983074" />
|
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24980299" />
|
||||||
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
|
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
|
||||||
<window_info id="Favorites" order="2" side_tool="true" />
|
<window_info id="Favorites" order="2" side_tool="true" />
|
||||||
<window_info anchor="bottom" id="Message" order="0" />
|
<window_info anchor="bottom" id="Message" order="0" />
|
||||||
@ -336,6 +333,27 @@
|
|||||||
<entry file="file://$PROJECT_DIR$/js/draw-a-digit.js">
|
<entry file="file://$PROJECT_DIR$/js/draw-a-digit.js">
|
||||||
<provider selected="true" editor-type-id="text-editor" />
|
<provider selected="true" editor-type-id="text-editor" />
|
||||||
</entry>
|
</entry>
|
||||||
|
<entry file="file://$PROJECT_DIR$/templates/draw_a_digit.html">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="255">
|
||||||
|
<caret line="15" selection-start-line="14" selection-end-line="15" />
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
<entry file="file://$PROJECT_DIR$/css/index.css">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="476">
|
||||||
|
<caret line="28" column="11" selection-start-line="28" selection-start-column="11" selection-end-line="28" selection-end-column="11" />
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
<entry file="file://$PROJECT_DIR$/css/draw-a-digit.css">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="102">
|
||||||
|
<caret line="6" column="1" lean-forward="true" selection-start-line="6" selection-start-column="1" selection-end-line="6" selection-end-column="1" />
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
<entry file="file://$PROJECT_DIR$/gradio.py">
|
<entry file="file://$PROJECT_DIR$/gradio.py">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state>
|
<state>
|
||||||
@ -345,38 +363,18 @@
|
|||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
</entry>
|
</entry>
|
||||||
<entry file="file://$PROJECT_DIR$/css/index.css">
|
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
|
||||||
<state relative-caret-position="773">
|
|
||||||
<caret line="71" selection-start-line="71" selection-end-line="71" />
|
|
||||||
</state>
|
|
||||||
</provider>
|
|
||||||
</entry>
|
|
||||||
<entry file="file://$PROJECT_DIR$/css/draw-a-digit.css">
|
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
|
||||||
<state relative-caret-position="306">
|
|
||||||
<caret line="18" selection-start-line="18" selection-end-line="51" />
|
|
||||||
</state>
|
|
||||||
</provider>
|
|
||||||
</entry>
|
|
||||||
<entry file="file://$PROJECT_DIR$/templates/draw_a_digit.html">
|
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
|
||||||
<state relative-caret-position="255">
|
|
||||||
<caret line="15" selection-start-line="14" selection-end-line="15" />
|
|
||||||
<folding>
|
|
||||||
<element signature="e#3443#3449#0" expanded="true" />
|
|
||||||
<element signature="e#3456#3462#0" expanded="true" />
|
|
||||||
</folding>
|
|
||||||
</state>
|
|
||||||
</provider>
|
|
||||||
</entry>
|
|
||||||
<entry file="file://$PROJECT_DIR$/index.html">
|
<entry file="file://$PROJECT_DIR$/index.html">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="302">
|
<state relative-caret-position="631">
|
||||||
<caret line="114" column="189" lean-forward="true" selection-start-line="114" selection-start-column="189" selection-end-line="114" selection-end-column="189" />
|
<caret line="217" selection-start-line="202" selection-end-line="217" />
|
||||||
<folding>
|
<folding>
|
||||||
<element signature="e#13772#13778#0" expanded="true" />
|
<element signature="n#style#0;n#nav#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||||
<element signature="e#14042#14048#0" expanded="true" />
|
<element signature="n#style#0;n#a#0;n#nav#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#li#0;n#ul#1;n#div#0;n#nav#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#p#0;n#div#0;n#section#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="e#6507#6513#0" expanded="true" />
|
||||||
|
<element signature="e#6658#6664#0" expanded="true" />
|
||||||
|
<element signature="e#7106#7112#0" expanded="true" />
|
||||||
</folding>
|
</folding>
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
|
|||||||
@ -2,11 +2,18 @@
|
|||||||
--jumbotron-padding-y: 3rem;
|
--jumbotron-padding-y: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lead{
|
||||||
|
color:white !important;
|
||||||
|
}
|
||||||
|
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
padding-top: var(--jumbotron-padding-y);
|
padding-top: var(--jumbotron-padding-y);
|
||||||
padding-bottom: var(--jumbotron-padding-y);
|
padding-bottom: var(--jumbotron-padding-y);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
background-image: url("https://static1.squarespace.com/static/5bf1fef3b27e396eb3c91f08/t/5c10b7b40e2e72725c2f3238/1544599520911/?format=2500w");
|
||||||
|
background-position: 10% 20%;
|
||||||
|
color:white
|
||||||
}
|
}
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
@ -15,12 +22,27 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.codebox {
|
||||||
|
/* Below are styles for the codebox (not the code itself) */
|
||||||
|
border:1px solid black;
|
||||||
|
background-color:#e3f2fd;
|
||||||
|
width:600px;
|
||||||
|
overflow:auto;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
.codebox code {
|
||||||
|
/* Styles in here affect the text of the codebox */
|
||||||
|
font-size:0.9em;
|
||||||
|
/* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.jumbotron p:last-child {
|
.jumbotron p:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jumbotron-heading {
|
.jumbotron-heading {
|
||||||
font-weight: 300;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jumbotron .container {
|
.jumbotron .container {
|
||||||
@ -36,6 +58,16 @@ footer p {
|
|||||||
margin-bottom: .25rem;
|
margin-bottom: .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-pink{
|
||||||
|
background-color: #FF6384;
|
||||||
|
color: white;
|
||||||
|
padding
|
||||||
|
}
|
||||||
|
.btn-pink:hover{
|
||||||
|
background-color: #f15d7c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
/* Style all font awesome icons */
|
/* Style all font awesome icons */
|
||||||
.fa {
|
.fa {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
@ -69,3 +101,14 @@ footer p {
|
|||||||
background: black;
|
background: black;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: static;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
/* Set the fixed height of the footer here */
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px; /* Vertically center the text there */
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|||||||
BIN
img/evaluator.png
Normal file
BIN
img/evaluator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
70
index.html
70
index.html
@ -20,8 +20,8 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
<nav class="navbar navbar-expand-md navbar-light fixed-top" style="background-color: #e3f2fd">
|
||||||
<a class="navbar-brand" href="#">Gradio</a>
|
<a class="navbar-brand" href="#" style="font-weight:bold">Gradio</a>
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
@ -47,8 +47,8 @@
|
|||||||
<!--<li class="nav-item">-->
|
<!--<li class="nav-item">-->
|
||||||
<!--<a class="nav-link" href="#">Help</a>-->
|
<!--<a class="nav-link" href="#">Help</a>-->
|
||||||
<!--</li>-->
|
<!--</li>-->
|
||||||
<li class="nav-item ">
|
<li class="nav-item " style="font-weight:500; font-decoration:none">
|
||||||
<a class="nav-link" href="http://www.siliconprep.com"><em>A tool by Silicon School</em></a>
|
<a class="nav-link" href="http://www.siliconprep.com"><em>Developed by Silicon Prep</em></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -92,16 +92,66 @@
|
|||||||
<section class="jumbotron text-center">
|
<section class="jumbotron text-center">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="jumbotron-heading">Gradio</h1>
|
<h1 class="jumbotron-heading">Gradio</h1>
|
||||||
<p class="lead text-muted">Put a beautiful interactive demo layer over your trained ML model.</p>
|
<p class="lead text-muted" style="font-weight:400 !important">Put a beautiful interactive demo layer over your trained ML model.</p>
|
||||||
<p>
|
<p>
|
||||||
<a href="#" class="btn btn-primary my-2">See an example</a>
|
<a href="#" class="btn btn-lg btn-pink my-2">Get started</a>
|
||||||
<a href="#" class="btn btn-secondary my-2">How to use Gradio</a>
|
<a href="#" class="btn btn-lg btn-primary my-2">See examples</a>
|
||||||
|
<a href="#" class="btn btn-lg btn-secondary my-2">Github</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="album py-5 bg-light">
|
<div class="album py-5 bg-light">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<h1>Getting started</h1>
|
||||||
|
<p>
|
||||||
|
Gradio (gradient input-output) is a python library that allows you to easily transform your trained model into a webpage that easily allows you to interface with it. This allows you to:
|
||||||
|
<ul>
|
||||||
|
<li>Show off the model to others</li>
|
||||||
|
<li>Identify response to unusual behavior</li>
|
||||||
|
<li>Encourage fairness and reproducibility of your model</li>
|
||||||
|
</ul>
|
||||||
|
Gradio is designed to be very simple to use. For example, in just 2 lines of Python code, you can create a sketchpad that allows you write digits and see whether your MNIST model can correctly identify them.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4> Installation </h4>
|
||||||
|
<p> Gradio is a standard python library, so install it from your terminal like this:
|
||||||
|
<div class="codebox">
|
||||||
|
<code>
|
||||||
|
pip install gradio
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
|
<h4> Usage </h4>
|
||||||
|
<p> To use gradio in your code, simply import it, and then launch the appropriate interface
|
||||||
|
<div class="codebox">
|
||||||
|
<code>
|
||||||
|
import gradio <br>
|
||||||
|
import tensorflow as tf <br> <br>
|
||||||
|
|
||||||
|
model = tf.keras.Sequential() <br>
|
||||||
|
# Define your model, as you ordinarily do <br>
|
||||||
|
# Train your model, as you ordinarily do <br> <br>
|
||||||
|
|
||||||
|
gradio.interfaces.Sketchpad(model=model, model_type='keras').launch()
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
This will open a new browser window which will allow you to draw into a "sketchpad". Behind the scenes, gradio transforms the user drawing into a numeric array and passes it into your model for your prediction.
|
||||||
|
Then, gradio will fetch the result and show it to the user. Like this:
|
||||||
|
<br> <br>
|
||||||
|
Currently, the following <code>model_type</code> are supported:
|
||||||
|
<ul>
|
||||||
|
<li>Keras models</li>
|
||||||
|
<li>Sklearn models</li>
|
||||||
|
<li>Arbitrary python functions</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
See the gallery of interfaces below to see what kind of interfaces can be supported. Contribute your own interfaces by visiting our GitHub page.
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<h1>Gallery of Interfaces</h1>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
@ -152,15 +202,15 @@
|
|||||||
|
|
||||||
<!--<div class="col-md-4">-->
|
<!--<div class="col-md-4">-->
|
||||||
<!--<div class="card mb-4 shadow-sm">-->
|
<!--<div class="card mb-4 shadow-sm">-->
|
||||||
<!--<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">-->
|
<!--<img class="card-img-top" src="img/placeholder.png" alt="Card image cap">-->
|
||||||
<!--<div class="card-body">-->
|
<!--<div class="card-body">-->
|
||||||
<!--<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>-->
|
<!--<p class="card-text"><strong>Image Blender</strong>: use an GAN to generate a sequence of images imputed between two images that the user has supplied.</p>-->
|
||||||
<!--<div class="d-flex justify-content-between align-items-center">-->
|
<!--<div class="d-flex justify-content-between align-items-center">-->
|
||||||
<!--<div class="btn-group">-->
|
<!--<div class="btn-group">-->
|
||||||
<!--<button type="button" class="btn btn-sm btn-outline-secondary">View</button>-->
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">View</button>-->
|
||||||
<!--<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>-->
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>-->
|
||||||
<!--</div>-->
|
<!--</div>-->
|
||||||
<!--<small class="text-muted">9 mins</small>-->
|
<!--<small class="text-muted"></small>-->
|
||||||
<!--</div>-->
|
<!--</div>-->
|
||||||
<!--</div>-->
|
<!--</div>-->
|
||||||
<!--</div>-->
|
<!--</div>-->
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user