mirror of
https://github.com/gradio-app/gradio.git
synced 2025-04-12 12:40:29 +08:00
reorganized files and added landing page
This commit is contained in:
Abubakar Abid
parent
54fdfd8aec
commit
cd53f6fc2a
12
.idea/gradiome.iml
generated
Normal file
12
.idea/gradiome.iml
generated
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="PYTHON_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
<component name="TestRunnerService">
|
||||
<option name="projectConfiguration" value="pytest" />
|
||||
<option name="PROJECT_TEST_RUNNER" value="pytest" />
|
||||
</component>
|
||||
</module>
|
||||
4
.idea/misc.xml
generated
Normal file
4
.idea/misc.xml
generated
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.7" project-jdk-type="Python SDK" />
|
||||
</project>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/gradiome.iml" filepath="$PROJECT_DIR$/.idea/gradiome.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
143
.idea/workspace.xml
generated
143
.idea/workspace.xml
generated
@ -2,6 +2,13 @@
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<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$/css/starter-template.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/draw-a-digit.css" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/templates/draw_a_digit.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/draw_a_digit.html" afterDir="false" />
|
||||
</list>
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
@ -14,37 +21,42 @@
|
||||
<session id="-278724352">
|
||||
<usages-collector id="statistics.lifecycle.project">
|
||||
<counts>
|
||||
<entry key="project.closed" value="1" />
|
||||
<entry key="project.closed" value="2" />
|
||||
<entry key="project.open.time.0" value="1" />
|
||||
<entry key="project.open.time.1" value="1" />
|
||||
<entry key="project.opened" value="2" />
|
||||
<entry key="project.open.time.16" value="1" />
|
||||
<entry key="project.opened" value="3" />
|
||||
</counts>
|
||||
</usages-collector>
|
||||
<usages-collector id="statistics.file.extensions.open">
|
||||
<counts>
|
||||
<entry key="css" value="1" />
|
||||
<entry key="html" value="4" />
|
||||
<entry key="css" value="2" />
|
||||
<entry key="html" value="5" />
|
||||
<entry key="js" value="1" />
|
||||
<entry key="py" value="12" />
|
||||
</counts>
|
||||
</usages-collector>
|
||||
<usages-collector id="statistics.file.types.open">
|
||||
<counts>
|
||||
<entry key="CSS" value="1" />
|
||||
<entry key="HTML" value="4" />
|
||||
<entry key="CSS" value="2" />
|
||||
<entry key="HTML" value="5" />
|
||||
<entry key="JavaScript" value="1" />
|
||||
<entry key="Python" value="12" />
|
||||
</counts>
|
||||
</usages-collector>
|
||||
<usages-collector id="statistics.file.extensions.edit">
|
||||
<counts>
|
||||
<entry key="css" value="11" />
|
||||
<entry key="html" value="1600" />
|
||||
<entry key="css" value="27" />
|
||||
<entry key="html" value="2526" />
|
||||
<entry key="js" value="4" />
|
||||
<entry key="py" value="2465" />
|
||||
</counts>
|
||||
</usages-collector>
|
||||
<usages-collector id="statistics.file.types.edit">
|
||||
<counts>
|
||||
<entry key="CSS" value="11" />
|
||||
<entry key="HTML" value="1600" />
|
||||
<entry key="CSS" value="27" />
|
||||
<entry key="HTML" value="2526" />
|
||||
<entry key="JavaScript" value="4" />
|
||||
<entry key="Python" value="2465" />
|
||||
</counts>
|
||||
</usages-collector>
|
||||
@ -52,24 +64,57 @@
|
||||
</component>
|
||||
<component name="FileEditorManager">
|
||||
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||
<file pinned="false" current-in-tab="true">
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/templates/draw_a_digit.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="376">
|
||||
<caret line="83" column="61" selection-start-line="83" selection-start-column="61" selection-end-line="83" selection-end-column="61" />
|
||||
<state relative-caret-position="255">
|
||||
<caret line="15" selection-start-line="14" selection-end-line="15" />
|
||||
<folding>
|
||||
<element signature="n#style#0;n#div#0;n#footer#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||
<element signature="e#3443#3449#0" expanded="true" />
|
||||
<element signature="e#3456#3462#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/css/starter-template.css">
|
||||
<file pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="374">
|
||||
<caret line="22" column="11" selection-start-line="22" selection-start-column="11" selection-end-line="22" selection-end-column="11" />
|
||||
<state relative-caret-position="302">
|
||||
<caret line="114" column="189" lean-forward="true" selection-start-line="114" selection-start-column="189" selection-end-line="114" selection-end-column="189" />
|
||||
<folding>
|
||||
<element signature="e#13772#13778#0" expanded="true" />
|
||||
<element signature="e#14042#14048#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/gradio.py">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state>
|
||||
<folding>
|
||||
<element signature="e#0#35#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<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>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<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>
|
||||
@ -111,10 +156,15 @@
|
||||
<find>css/</find>
|
||||
<find>communica</find>
|
||||
<find>communicate</find>
|
||||
<find>nav></find>
|
||||
<find>album ex</find>
|
||||
<find>9 mi</find>
|
||||
<find>Edit</find>
|
||||
</findStrings>
|
||||
<replaceStrings>
|
||||
<replace>400</replace>
|
||||
<replace>../css/</replace>
|
||||
<replace>Source</replace>
|
||||
</replaceStrings>
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
@ -137,7 +187,10 @@
|
||||
<option value="$PROJECT_DIR$/client.html" />
|
||||
<option value="$PROJECT_DIR$/gradiome.py" />
|
||||
<option value="$PROJECT_DIR$/css/starter-template.css" />
|
||||
<option value="$PROJECT_DIR$/js/draw-a-digit.js" />
|
||||
<option value="$PROJECT_DIR$/templates/draw_a_digit.html" />
|
||||
<option value="$PROJECT_DIR$/css/index.css" />
|
||||
<option value="$PROJECT_DIR$/index.html" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
@ -147,7 +200,7 @@
|
||||
<option name="width" value="2576" />
|
||||
<option name="height" value="1096" />
|
||||
</component>
|
||||
<component name="ProjectLevelVcsManager">
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="true">
|
||||
<ConfirmationsSetting value="2" id="Add" />
|
||||
</component>
|
||||
<component name="ProjectView">
|
||||
@ -163,6 +216,16 @@
|
||||
<item name="gradiome" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="gradiome" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="gradiome" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="gradiome" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="css" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="gradiome" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="gradiome" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="js" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="gradiome" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="gradiome" type="462c0819:PsiDirectoryNode" />
|
||||
@ -175,6 +238,7 @@
|
||||
</panes>
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
<property name="SearchEverywhereHistoryKey" value="	FILE	file://C:/Users/islam/Repos/gradiome/css/starter-template.css" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||
<property name="settings.editor.selected.configurable" value="preferences.keymap" />
|
||||
</component>
|
||||
@ -267,40 +331,55 @@
|
||||
<entry file="file://$PROJECT_DIR$/home/consumers.py" />
|
||||
<entry file="file://$PROJECT_DIR$/home/routing.py" />
|
||||
<entry file="file://$PROJECT_DIR$/home/views.py" />
|
||||
<entry file="file://$PROJECT_DIR$/client.html">
|
||||
<entry file="file://$PROJECT_DIR$/client.html" />
|
||||
<entry file="file://$PROJECT_DIR$/gradiome.py" />
|
||||
<entry file="file://$PROJECT_DIR$/js/draw-a-digit.js">
|
||||
<provider selected="true" editor-type-id="text-editor" />
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/gradio.py">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="384">
|
||||
<caret line="207" selection-start-line="207" selection-end-line="207" />
|
||||
<state>
|
||||
<folding>
|
||||
<element signature="n#style#0;n#canvas#0;n#div#1;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||
<element signature="e#0#35#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/gradiome.py">
|
||||
<entry file="file://$PROJECT_DIR$/css/index.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="68">
|
||||
<caret line="4" column="19" selection-start-line="4" selection-start-column="7" selection-end-line="4" selection-end-column="19" />
|
||||
<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/starter-template.css">
|
||||
<entry file="file://$PROJECT_DIR$/css/draw-a-digit.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="374">
|
||||
<caret line="22" column="11" selection-start-line="22" selection-start-column="11" selection-end-line="22" selection-end-column="11" />
|
||||
<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="376">
|
||||
<caret line="83" column="61" selection-start-line="83" selection-start-column="61" selection-end-line="83" selection-end-column="61" />
|
||||
<state relative-caret-position="255">
|
||||
<caret line="15" selection-start-line="14" selection-end-line="15" />
|
||||
<folding>
|
||||
<element signature="n#style#0;n#div#0;n#footer#0;n#body#0;n#html#0;n#!!top" expanded="true" />
|
||||
<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">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="302">
|
||||
<caret line="114" column="189" lean-forward="true" selection-start-line="114" selection-start-column="189" selection-end-line="114" selection-end-column="189" />
|
||||
<folding>
|
||||
<element signature="e#13772#13778#0" expanded="true" />
|
||||
<element signature="e#14042#14048#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</component>
|
||||
</project>
|
||||
@ -43,3 +43,9 @@ body {
|
||||
background: #55ACEE;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Twitter */
|
||||
.fa-github {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
71
css/index.css
Normal file
71
css/index.css
Normal file
@ -0,0 +1,71 @@
|
||||
:root {
|
||||
--jumbotron-padding-y: 3rem;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding-top: var(--jumbotron-padding-y);
|
||||
padding-bottom: var(--jumbotron-padding-y);
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: calc(var(--jumbotron-padding-y) * 2);
|
||||
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.jumbotron-heading {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.jumbotron .container {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
/* Style all font awesome icons */
|
||||
.fa {
|
||||
padding: 12px;
|
||||
font-size: 30px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Add a hover effect if you want */
|
||||
.fa:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Set a specific color for each brand */
|
||||
|
||||
/* Facebook */
|
||||
.fa-facebook {
|
||||
background: #3B5998;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Twitter */
|
||||
.fa-twitter {
|
||||
background: #55ACEE;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Twitter */
|
||||
.fa-github {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
BIN
img/draw-a-digit.png
Normal file
BIN
img/draw-a-digit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
img/placeholder.jpg
Normal file
BIN
img/placeholder.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
img/placeholder.png
Normal file
BIN
img/placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
281
index.html
Normal file
281
index.html
Normal file
@ -0,0 +1,281 @@
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<!--<link rel="icon" href="../../../../favicon.ico">-->
|
||||
|
||||
<title>Gradio: An Interactive Demo for Your Trained ML Model</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="css/index.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
||||
<a class="navbar-brand" href="#">Gradio</a>
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<!--<li class="nav-item active">-->
|
||||
<!--<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>-->
|
||||
<!--</li>-->
|
||||
<!--<li class="nav-item">-->
|
||||
<!--<a class="nav-link disabled" href="#">Disabled</a>-->
|
||||
<!--</li>-->
|
||||
<!--<li class="nav-item dropdown">-->
|
||||
<!--<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>-->
|
||||
<!--<div class="dropdown-menu" aria-labelledby="dropdown01">-->
|
||||
<!--<a class="dropdown-item" href="#">Action</a>-->
|
||||
<!--<a class="dropdown-item" href="#">Another action</a>-->
|
||||
<!--<a class="dropdown-item" href="#">Something else here</a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<!--<li class="nav-item">-->
|
||||
<!--<a class="nav-link" href="#">Help</a>-->
|
||||
<!--</li>-->
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="http://www.siliconprep.com"><em>A tool by Silicon School</em></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!--<header>-->
|
||||
<!--<div class="collapse bg-dark" id="navbarHeader">-->
|
||||
<!--<div class="container">-->
|
||||
<!--<div class="row">-->
|
||||
<!--<div class="col-sm-8 col-md-7 py-4">-->
|
||||
<!--<h4 class="text-white">About</h4>-->
|
||||
<!--<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="col-sm-4 offset-md-1 py-4">-->
|
||||
<!--<h4 class="text-white">Contact</h4>-->
|
||||
<!--<ul class="list-unstyled">-->
|
||||
<!--<li><a href="#" class="text-white">Follow on Twitter</a></li>-->
|
||||
<!--<li><a href="#" class="text-white">Like on Facebook</a></li>-->
|
||||
<!--<li><a href="#" class="text-white">Email me</a></li>-->
|
||||
<!--</ul>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="navbar navbar-dark bg-dark shadow-sm">-->
|
||||
<!--<div class="container d-flex justify-content-between">-->
|
||||
<!--<a href="#" class="navbar-brand d-flex align-items-center">-->
|
||||
<!--<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>-->
|
||||
<!--<strong>Album</strong>-->
|
||||
<!--</a>-->
|
||||
<!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">-->
|
||||
<!--<span class="navbar-toggler-icon"></span>-->
|
||||
<!--</button>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</header>-->
|
||||
|
||||
<main role="main">
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<div class="container">
|
||||
<h1 class="jumbotron-heading">Gradio</h1>
|
||||
<p class="lead text-muted">Put a beautiful interactive demo layer over your trained ML model.</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary my-2">See an example</a>
|
||||
<a href="#" class="btn btn-secondary my-2">How to use Gradio</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="album py-5 bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<img class="card-img-top" src="img/draw-a-digit.png" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<p class="card-text"><strong>Draw a Digit</strong>: allow users to draw their own digits to test MNIST-type models.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.href='templates/draw_a_digit.html';">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.href='https://github.com/abidlabs/gradiome/blob/master/templates/draw_a_digit.html';">Source</button>
|
||||
</div>
|
||||
<small class="text-muted"></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<img class="card-img-top" src="img/placeholder.png" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<p class="card-text"><strong>Emotion Detector</strong>: allow users to make emotions through their webcam and detect their emotion with your model.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<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">Source</button>
|
||||
</div>
|
||||
<small class="text-muted"></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<img class="card-img-top" src="img/placeholder.png" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<p class="card-text"><strong>Automated Author</strong>: use an RNN to generate a sequence of words beginning the words that the user has supplied</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<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">Source</button>
|
||||
</div>
|
||||
<small class="text-muted"></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="col-md-4">-->
|
||||
<!--<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">-->
|
||||
<!--<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>-->
|
||||
<!--<div class="d-flex justify-content-between align-items-center">-->
|
||||
<!--<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">Source</button>-->
|
||||
<!--</div>-->
|
||||
<!--<small class="text-muted">9 mins</small>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="col-md-4">-->
|
||||
<!--<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">-->
|
||||
<!--<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>-->
|
||||
<!--<div class="d-flex justify-content-between align-items-center">-->
|
||||
<!--<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">Source</button>-->
|
||||
<!--</div>-->
|
||||
<!--<small class="text-muted">9 mins</small>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="col-md-4">-->
|
||||
<!--<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">-->
|
||||
<!--<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>-->
|
||||
<!--<div class="d-flex justify-content-between align-items-center">-->
|
||||
<!--<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">Source</button>-->
|
||||
<!--</div>-->
|
||||
<!--<small class="text-muted">9 mins</small>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<div class="col-md-4">-->
|
||||
<!--<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">-->
|
||||
<!--<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>-->
|
||||
<!--<div class="d-flex justify-content-between align-items-center">-->
|
||||
<!--<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">Source</button>-->
|
||||
<!--</div>-->
|
||||
<!--<small class="text-muted">9 mins</small>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="col-md-4">-->
|
||||
<!--<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">-->
|
||||
<!--<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>-->
|
||||
<!--<div class="d-flex justify-content-between align-items-center">-->
|
||||
<!--<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">Source</button>-->
|
||||
<!--</div>-->
|
||||
<!--<small class="text-muted">9 mins</small>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="col-md-4">-->
|
||||
<!--<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">-->
|
||||
<!--<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>-->
|
||||
<!--<div class="d-flex justify-content-between align-items-center">-->
|
||||
<!--<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">Source</button>-->
|
||||
<!--</div>-->
|
||||
<!--<small class="text-muted">9 mins</small>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container" >
|
||||
<span class="text-muted">
|
||||
|
||||
<!-- Add font awesome icons -->
|
||||
Gradio is open-source, help make it better
|
||||
<a href="https://github.com/abidlabs/gradiome" target="_blank" class="fa fa-github"></a>
|
||||
|
||||
</span>
|
||||
|
||||
<span class="text-muted pull-right">
|
||||
|
||||
<!-- Add font awesome icons -->
|
||||
Found this useful? Kindly spread the word
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u=www.siliconprep.com" target="_blank" class="fa fa-facebook"></a>
|
||||
<a href="https://twitter.com/home?status=Check%20out%20Gradio%20tool%20at%20www.siliconprep.com" target="_blank" class="fa fa-twitter"></a>
|
||||
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<!--<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>-->
|
||||
<!--<script src="../../assets/js/vendor/popper.min.js"></script>-->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<!--<script src="../../assets/js/vendor/holder.min.js"></script>-->
|
||||
</body>
|
||||
</html>
|
||||
128
js/draw-a-digit.js
Normal file
128
js/draw-a-digit.js
Normal file
@ -0,0 +1,128 @@
|
||||
var canvas = document.getElementById('canvas');
|
||||
context = canvas.getContext("2d");
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
|
||||
var predict_canvas = document.getElementById("predict_canvas");
|
||||
var ctx = predict_canvas.getContext("2d");
|
||||
|
||||
const sleep = (milliseconds) => {
|
||||
return new Promise(resolve => setTimeout(resolve, milliseconds))
|
||||
}
|
||||
|
||||
function notifyError(error) {
|
||||
$.notify({
|
||||
// options
|
||||
message: 'Not able to communicate with model (is python code still running?)'
|
||||
},{
|
||||
// settings
|
||||
type: 'danger',
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
},
|
||||
placement: {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
delay: 5000
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
var ws = new WebSocket("ws://127.0.0.1:5679/")
|
||||
ws.onerror = function(evt) {
|
||||
notifyError(evt)
|
||||
};
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
console.log(event.data);
|
||||
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
ctx.font = "330px Arial";
|
||||
ctx.fillStyle = "white";
|
||||
sleep(300).then(() => {
|
||||
ctx.fillText(event.data, 110, 310);
|
||||
})
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
notifyError(e)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
$('#canvas').mousedown(function(e){
|
||||
var mouseX = e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft;
|
||||
var mouseY = e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop
|
||||
;
|
||||
|
||||
paint = true;
|
||||
addClick(mouseX, mouseY);
|
||||
redraw();
|
||||
});
|
||||
$('#canvas').mousemove(function(e){
|
||||
if(paint){
|
||||
addClick(e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft, e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop, true);
|
||||
redraw();
|
||||
}
|
||||
});
|
||||
$('#canvas').mouseup(function(e){
|
||||
paint = false;
|
||||
});
|
||||
$('#canvas').mouseleave(function(e){
|
||||
paint = false;
|
||||
});
|
||||
var clickX = new Array();
|
||||
var clickY = new Array();
|
||||
var clickDrag = new Array();
|
||||
var paint;
|
||||
|
||||
function addClick(x, y, dragging)
|
||||
{
|
||||
clickX.push(x);
|
||||
clickY.push(y);
|
||||
clickDrag.push(dragging);
|
||||
}
|
||||
function redraw(){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
|
||||
context.strokeStyle = "#FFF";
|
||||
context.lineJoin = "round";
|
||||
context.lineWidth = 25;
|
||||
|
||||
for(var i=0; i < clickX.length; i++) {
|
||||
context.beginPath();
|
||||
if(clickDrag[i] && i){
|
||||
context.moveTo(clickX[i-1], clickY[i-1]);
|
||||
}else{
|
||||
context.moveTo(clickX[i]-1, clickY[i]);
|
||||
}
|
||||
context.lineTo(clickX[i], clickY[i]);
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
$('#clear-button').click(function(e){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
clickX = new Array();
|
||||
clickY = new Array();
|
||||
clickDrag = new Array();
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
})
|
||||
|
||||
|
||||
$('#submit-button').click(function(e){
|
||||
var dataURL = canvas.toDataURL("image/png");
|
||||
ws.send(dataURL, function(e){
|
||||
notifyError(e)
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
@ -11,9 +11,8 @@
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../css/starter-template.css" rel="stylesheet">
|
||||
<link href="../css/draw-a-digit.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Custom styles for this template -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -77,13 +76,21 @@
|
||||
</main><!-- /.container -->
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container" style="text-align:right">
|
||||
<div class="container" >
|
||||
<span class="text-muted">
|
||||
|
||||
<!-- Add font awesome icons -->
|
||||
Gradio is open-source, help make it better
|
||||
<a href="https://github.com/abidlabs/gradiome" target="_blank" class="fa fa-github"></a>
|
||||
|
||||
</span>
|
||||
|
||||
<span class="text-muted pull-right">
|
||||
|
||||
<!-- Add font awesome icons -->
|
||||
Found this useful? Kindly spread the word
|
||||
<a href="#" class="fa fa-facebook"></a>
|
||||
<a href="#" class="fa fa-twitter"></a>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u=www.siliconprep.com" target="_blank" class="fa fa-facebook"></a>
|
||||
<a href="https://twitter.com/home?status=Check%20out%20Gradio%20tool%20at%20www.siliconprep.com" target="_blank" class="fa fa-twitter"></a>
|
||||
|
||||
|
||||
</span>
|
||||
@ -96,138 +103,6 @@
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="../js/bootstrap.min.js"></script>
|
||||
<script src="../js/bootstrap-notify.min.js"></script>
|
||||
<script>
|
||||
|
||||
var canvas = document.getElementById('canvas');
|
||||
context = canvas.getContext("2d");
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
|
||||
var predict_canvas = document.getElementById("predict_canvas");
|
||||
var ctx = predict_canvas.getContext("2d");
|
||||
|
||||
const sleep = (milliseconds) => {
|
||||
return new Promise(resolve => setTimeout(resolve, milliseconds))
|
||||
}
|
||||
|
||||
function notifyError(error) {
|
||||
$.notify({
|
||||
// options
|
||||
message: 'Not able to communicate with model (is python code still running?)'
|
||||
},{
|
||||
// settings
|
||||
type: 'danger',
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
},
|
||||
placement: {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
delay: 5000
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
var ws = new WebSocket("ws://127.0.0.1:5679/")
|
||||
ws.onerror = function(evt) {
|
||||
notifyError(evt)
|
||||
};
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
console.log(event.data);
|
||||
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
ctx.font = "330px Arial";
|
||||
ctx.fillStyle = "white";
|
||||
sleep(300).then(() => {
|
||||
ctx.fillText(event.data, 110, 310);
|
||||
})
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
notifyError(e)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
$('#canvas').mousedown(function(e){
|
||||
var mouseX = e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft;
|
||||
var mouseY = e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop
|
||||
;
|
||||
|
||||
paint = true;
|
||||
addClick(mouseX, mouseY);
|
||||
redraw();
|
||||
});
|
||||
$('#canvas').mousemove(function(e){
|
||||
if(paint){
|
||||
addClick(e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft, e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop, true);
|
||||
redraw();
|
||||
}
|
||||
});
|
||||
$('#canvas').mouseup(function(e){
|
||||
paint = false;
|
||||
});
|
||||
$('#canvas').mouseleave(function(e){
|
||||
paint = false;
|
||||
});
|
||||
var clickX = new Array();
|
||||
var clickY = new Array();
|
||||
var clickDrag = new Array();
|
||||
var paint;
|
||||
|
||||
function addClick(x, y, dragging)
|
||||
{
|
||||
clickX.push(x);
|
||||
clickY.push(y);
|
||||
clickDrag.push(dragging);
|
||||
}
|
||||
function redraw(){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
|
||||
context.strokeStyle = "#FFF";
|
||||
context.lineJoin = "round";
|
||||
context.lineWidth = 25;
|
||||
|
||||
for(var i=0; i < clickX.length; i++) {
|
||||
context.beginPath();
|
||||
if(clickDrag[i] && i){
|
||||
context.moveTo(clickX[i-1], clickY[i-1]);
|
||||
}else{
|
||||
context.moveTo(clickX[i]-1, clickY[i]);
|
||||
}
|
||||
context.lineTo(clickX[i], clickY[i]);
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
$('#clear-button').click(function(e){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
clickX = new Array();
|
||||
clickY = new Array();
|
||||
clickDrag = new Array();
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
})
|
||||
|
||||
|
||||
$('#submit-button').click(function(e){
|
||||
var dataURL = canvas.toDataURL("image/png");
|
||||
ws.send(dataURL, function(e){
|
||||
notifyError(e)
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<script src="../js/draw-a-digit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user