mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-18 10:44:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

API Docs Fixes (#787)

Browse Source 
* fix examples format

* add related methods

* black formatting

* added copy button with styling

* upgraded black locally and reformatted

* add inline comments to related methods

* added syntax highlighting

* fix examples bug with directories

* expanded to audio, video, and file
This commit is contained in:
Ali Abdalla 2022-03-10 06:33:18 +02:00 committed by GitHub
parent f27bf3fde4
commit f90ab24a72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 150 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gradio/routes.py
View File

@ -223,8 +223,13 @@ def api_docs(request: Request):
output_types_doc, output_types = get_types(outputs, "output")
input_names = [type(inp).__name__ for inp in app.launchable.input_components]
output_names = [type(out).__name__ for out in app.launchable.output_components]
if app.launchable.examples is not None:
sample_inputs = app.launchable.examples[0]
if isinstance(app.launchable.examples, list):
example = app.launchable.examples[0]
sample_inputs = []
for index, example_input in enumerate(example):
sample_inputs.append(
app.launchable.input_components[index].preprocess_example(example_input)
)
else:
sample_inputs = [
inp.generate_sample() for inp in app.launchable.input_components

159
gradio/templates/api_docs.html
View File

@ -22,6 +22,8 @@
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap">
</noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap">
<link rel="stylesheet" href="https://gradio.app/assets/prism.css">
<style>
html {
@ -211,6 +213,36 @@
color: grey !important;
pointer-events: none;
}
.copy {
float: right;
padding-right: 1em;
background: whitesmoke;
border: none !important;
cursor: pointer;
}
.float-left {
float:left;
width: 90%;
overflow: auto;
}
.copy-svg {
visibility: hidden;
margin: 1em 0 0 0 !important;
width: 20px;
}
.code-block:hover .copy-svg {
visibility: visible;
}
pre {
float:left;
width: 90%;
overflow: auto !important;
background: inherit !important;
}
</style>
<meta property="og:url" content="https://gradio.app/" />
@ -286,23 +318,31 @@
</ul>
<h4 id="payload">Payload: </h4>
<div class="json">
<div class="json code-block">
<div class="float-left">
<p>&emsp;&emsp;{</p>
<p>&emsp;&emsp;&emsp;&emsp;"data": [{%for i in range(0, len_inputs)%} <span>{{ input_types[i]
}}</span>{% if i != len_inputs - 1 %} ,{% endif %}{%endfor%} ]</p>
<p>&emsp;&emsp;}</p>
</div>
<button class="copy" onclick="copyCode(this)"><svg class="copy-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #808080;"><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>
<div></div></button>
</div>
{% if auth is not none %}
<p>Note: This interface requires authentication. This means you will have to first post to the login api before you can post to the predict endpoint. See below for more info </p>
{% endif %}
<h4 id="response">Response: </h4>
<div class="json">
<div class="json code-block">
<div class="float-left">
<p>&emsp;&emsp;{</p>
<p>&emsp;&emsp;&emsp;&emsp;"data": [{%for i in range(0, len_outputs)%} <span>{{ output_types[i]
}}</span>{% if i != len_outputs - 1 %} ,{% endif %}{%endfor%} ],</p>
<p>&emsp;&emsp;&emsp;&emsp;"durations": [ float ], # the time taken for the prediction to complete</p>
<p>&emsp;&emsp;&emsp;&emsp;"avg_durations": [ float ] # the average time taken for all predictions so far (used to estimate the runtime)</p>
<p>&emsp;&emsp;}</p>
</div>
<button class="copy" onclick="copyCode(this)"><svg class="copy-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #808080;"><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>
<div></div></button>
</div>
<h4 id="try-it">Try it (live demo): </h4>
@ -325,16 +365,9 @@
<div class="json">
{% if auth is not none %}
<!-- import requests-->
<!-- sess = requests.session()-->
<!-- sess.post(url='INTERFACE_URL/login', data={"username": "USERNAME", "password":"PASSWORD"})-->
<!-- r = sess.post(url='INTERFACE_URL/api/predict/',json={"data":[INPUT]}, )-->
<!-- -->
<!-- print(r.json())-->
<div class="json code-block">
<div class="float-left">
{% if auth is not none %}
<p class="syntax">import requests</p>
<br>
<p class="syntax">sess = requests.session()</p>
@ -363,11 +396,15 @@
<p>r.json()</p>
{% endif %}
</div>
<button class="copy" onclick="copyCode(this)"><svg class="copy-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #808080;"><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>
<div></div></button>
</div>
</div>
<div class="demo-window" demo="2">
<div class="json">
<div class="json code-block">
<div class="float-left">
{% if auth is not none %}
<p class="syntax">curl -X POST&nbsp;-F 'username=USERNAME' -F 'password=PASSWORD' <span class="syntax" id="curl_syntax_url_login"></span>&nbsp;-c cookies.txt </p>
@ -386,10 +423,14 @@
{% endif %}
</div>
<button class="copy" onclick="copyCode(this)"><svg class="copy-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #808080;"><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>
<div></div></button>
</div>
</div>
<div class="demo-window" demo="3">
<div class="json">
<div class="json code-block">
<div class="float-left">
{% if auth is not none %}
<p class="syntax">// Will only work locally.</p>
<br>
@ -415,6 +456,9 @@
console.log(json_response) })</p>
</p>
{% endif %}
</div>
<button class="copy" onclick="copyCode(this)"><svg class="copy-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #808080;"><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>
<div></div></button>
</div>
</div>
</div>
@ -437,11 +481,20 @@
<p>&emsp;&emsp;}</p>
</div>
</div>
<div class="hidden" id="related-methods-holder">
<h4 id="related">Related Methods: </h4>
<div class="json code-block">
<pre><code class="language-python float-left" id="related-methods"></code></pre>
<button class="copy" onclick="copyCode(this)"><svg class="copy-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #808080;"><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>
<div></div></button>
</div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var len_inputs = {{ len_inputs }};
var len_outputs = {{ len_outputs }};
@ -538,6 +591,78 @@
$(`.demo-window[demo="${demo_num}"]`).show();
})
var inputRelatedMethods = {
'Image': `# To convert your image file into the base64 format required by the API
gr.processing_utils.encode_url_or_file_to_base64(path)
`,
'Video':`# To convert your video file into the base64 format required by the API
gr.processing_utils.encode_url_or_file_to_base64(path)
`,
'Audio':`# To convert your audio file into the base64 format required by the API
gr.processing_utils.encode_url_or_file_to_base64(path)
`,
'File':`# To convert your file into the base64 format required by the API
gr.processing_utils.encode_url_or_file_to_base64(path)
`
}
var outputRelatedMethods = {
'Image': `# To convert the base64 image returned by the API to an image tmp file object
gr.processing_utils.decode_base64_to_file(encoding, encryption_key=None, file_path=None)
`,
'Video': `# To convert the base64 video returned by the API to an video tmp file object
gr.processing_utils.decode_base64_to_file(encoding, encryption_key=None, file_path=None)
`,
'Audio': `# To convert the base64 audio returned by the API to an audio tmp file object
gr.processing_utils.decode_base64_to_file(encoding, encryption_key=None, file_path=None)
`,
'File': `# To convert the base64 file returned by the API to a regular tmp file object
gr.processing_utils.decode_base64_to_file(encoding, encryption_key=None, file_path=None)
`
}
var showRelated = false;
var relatedMethods = `import gradio as gr
`
{% for i in range(len_inputs) %}
if ("{{inputs[i]}}" in inputRelatedMethods) {
showRelated = true;
relatedMethods += inputRelatedMethods["{{inputs[i]}}"]
}
{% endfor %}
{% for i in range(len_outputs) %}
if ("{{outputs[i]}}" in outputRelatedMethods) {
showRelated = true;
relatedMethods += outputRelatedMethods["{{outputs[i]}}"]
}
{% endfor %}
if (showRelated) {
document.getElementById('related-methods').innerHTML = relatedMethods;
$('#related-methods-holder').removeClass("hidden");
}
function copyCode(elem) {
var text = elem.parentElement.innerText;
navigator.clipboard.writeText(text);
elem.firstChild.style="fill: #eb9f59;"
setTimeout(function(){
elem.firstChild.style="fill: #808080;"
}, 600);
};
var friendlyHttpStatus = {
'200': 'OK',
@ -584,6 +709,8 @@
};
</script>
<script src="https://gradio.app/assets/prism.js"></script>
</body>
</html>