basujindal
commented
2 years ago Hi, sometimes gradio uses other addresses like http://127.0.0.1:7861 or http://127.0.0.1:7862. Be sure to check the correct address when you run the command.
Closed Michoko92 closed 2 years ago
basujindal
commented
2 years ago Hi, sometimes gradio uses other addresses like http://127.0.0.1:7861 or http://127.0.0.1:7862. Be sure to check the correct address when you run the command.
Michoko92
commented
2 years ago Thank you for your quick reply, Basu. Actually, the URL is correct, and as shown above, there is actual HTML code inside. It's just that this code is incomplete and shows nothing.
Wolvenmoon
commented
2 years ago Seconding the issue. No screen in Chrome, Firefox or Edge (latest versions).
Source code in Chrome is:
<!DOCTYPE html>
<html lang="en" style="margin: 0; padding: 0; min-height: 100%">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
/>
<meta property="og:url" content="https://gradio.app/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="" />
<meta property="og:title" content="Gradio" />
<meta
property="og:description"
content=""
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@teamGradio" />
<meta name="twitter:title" content="Gradio" />
<meta
name="twitter:description"
content=""
/>
<meta name="twitter:image" content="" />
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-156449732-1");
window.__gradio_mode__ = "app";
</script>
<script>window.gradio_config = {"components": [{"id": 16, "props": {"style": {"equal_height": false, "mobile_collapse": true}, "type": "row", "visible": true}, "type": "row"}, {"id": 17, "props": {"style": {}, "type": "column", "variant": "panel", "visible": true}, "type": "column"}, {"id": 18, "props": {"style": {}, "type": "column", "variant": "default", "visible": true}, "type": "column"}, {"id": 0, "props": {"image_mode": "RGB", "label": "image", "mirror_webcam": true, "name": "image", "show_label": true, "source": "upload", "streaming": false, "style": {}, "tool": "editor", "visible": true}, "type": "image"}, {"id": 10, "props": {"label": "prompt", "lines": 1, "max_lines": 20, "name": "textbox", "show_label": true, "style": {}, "value": "", "visible": true}, "type": "textbox"}, {"id": 1, "props": {"label": "strength", "maximum": 1, "minimum": 0, "name": "slider", "show_label": true, "step": 0.01, "style": {}, "value": 0.75, "visible": true}, "type": "slider"}, {"id": 2, "props": {"label": "ddim_steps", "maximum": 1000, "minimum": 1, "name": "slider", "show_label": true, "step": 1, "style": {}, "value": 50, "visible": true}, "type": "slider"}, {"id": 3, "props": {"label": "n_iter", "maximum": 100, "minimum": 1, "name": "slider", "show_label": true, "step": 1, "style": {}, "value": 1, "visible": true}, "type": "slider"}, {"id": 4, "props": {"label": "batch_size", "maximum": 100, "minimum": 1, "name": "slider", "show_label": true, "step": 1, "style": {}, "value": 1, "visible": true}, "type": "slider"}, {"id": 5, "props": {"label": "Height", "maximum": 4096, "minimum": 64, "name": "slider", "show_label": true, "step": 64, "style": {}, "value": 512, "visible": true}, "type": "slider"}, {"id": 6, "props": {"label": "Width", "maximum": 4096, "minimum": 64, "name": "slider", "show_label": true, "step": 64, "style": {}, "value": 512, "visible": true}, "type": "slider"}, {"id": 7, "props": {"label": "scale", "maximum": 50, "minimum": 0, "name": "slider", "show_label": true, "step": 0.1, "style": {}, "value": 7.5, "visible": true}, "type": "slider"}, {"id": 11, "props": {"label": "seed", "lines": 1, "max_lines": 20, "name": "textbox", "show_label": true, "style": {}, "value": "", "visible": true}, "type": "textbox"}, {"id": 12, "props": {"label": "small_batch", "name": "checkbox", "show_label": true, "style": {}, "value": false, "visible": true}, "type": "checkbox"}, {"id": 13, "props": {"label": "full_precision", "name": "checkbox", "show_label": true, "style": {}, "value": false, "visible": true}, "type": "checkbox"}, {"id": 8, "props": {"label": "outdir", "lines": 1, "max_lines": 20, "name": "textbox", "show_label": true, "style": {}, "value": "outputs/img2img-samples", "visible": true}, "type": "textbox"}, {"id": 19, "props": {"style": {"mobile_collapse": false}, "type": "row", "visible": true}, "type": "row"}, {"id": 20, "props": {"name": "button", "style": {}, "value": "Clear", "variant": "secondary", "visible": true}, "type": "button"}, {"id": 21, "props": {"name": "button", "style": {}, "value": "Submit", "variant": "primary", "visible": true}, "type": "button"}, {"id": 22, "props": {"style": {}, "type": "column", "variant": "panel", "visible": true}, "type": "column"}, {"id": 23, "props": {"cover_container": true, "name": "statustracker", "style": {}, "visible": true}, "type": "statustracker"}, {"id": 14, "props": {"image_mode": "RGB", "interactive": false, "label": "output 0", "mirror_webcam": true, "name": "image", "show_label": true, "source": "upload", "streaming": false, "style": {}, "tool": "editor", "visible": true}, "type": "image"}, {"id": 15, "props": {"interactive": false, "label": "output 1", "lines": 1, "max_lines": 20, "name": "textbox", "show_label": true, "style": {}, "value": "", "visible": true}, "type": "textbox"}, {"id": 24, "props": {"style": {"mobile_collapse": false}, "type": "row", "visible": true}, "type": "row"}, {"id": 25, "props": {"name": "button", "style": {}, "value": "Flag", "variant": "secondary", "visible": true}, "type": "button"}], "css": null, "dependencies": [{"api_name": "predict", "backend_fn": true, "documentation": [[["base64 url data, or (if tool == \"sketch) a dict of image and mask base64 url data", "str | Dict"], ["text", "str | None"], ["numeric input", "float"], ["numeric input", "float"], ["numeric input", "float"], ["numeric input", "float"], ["numeric input", "float"], ["numeric input", "float"], ["numeric input", "float"], ["text", "str | None"], ["boolean input", "bool"], ["boolean input", "bool"], ["text", "str | None"]], [["base64 url data", "str"], ["text", "str | None"]]], "inputs": [0, 10, 1, 2, 3, 4, 5, 6, 7, 11, 12, 13, 8], "js": null, "outputs": [14, 15], "queue": null, "scroll_to_output": true, "show_progress": true, "status_tracker": 23, "targets": [21], "trigger": "click"}, {"api_name": null, "backend_fn": false, "inputs": [], "js": "() =\u003e [null, \"\", 0.75, 50, 1, 1, 512, 512, 7.5, \"\", null, null, \"\", null, \"\", {\"variant\": null, \"visible\": true, \"__type__\": \"update\"}]\n ", "outputs": [0, 10, 1, 2, 3, 4, 5, 6, 7, 11, 12, 13, 8, 14, 15, 18], "queue": false, "scroll_to_output": false, "show_progress": true, "status_tracker": null, "targets": [20], "trigger": "click"}, {"api_name": null, "backend_fn": true, "inputs": [0, 10, 1, 2, 3, 4, 5, 6, 7, 11, 12, 13, 8, 14, 15], "js": null, "outputs": [], "queue": false, "scroll_to_output": false, "show_progress": true, "status_tracker": null, "targets": [25], "trigger": "click"}], "dev_mode": false, "enable_queue": false, "is_space": false, "layout": {"children": [{"children": [{"children": [{"children": [{"id": 0}, {"id": 10}, {"id": 1}, {"id": 2}, {"id": 3}, {"id": 4}, {"id": 5}, {"id": 6}, {"id": 7}, {"id": 11}, {"id": 12}, {"id": 13}, {"id": 8}], "id": 18}, {"children": [{"id": 20}, {"id": 21}], "id": 19}], "id": 17}, {"children": [{"id": 23}, {"id": 14}, {"id": 15}, {"children": [{"id": 25}], "id": 24}], "id": 22}], "id": 16}], "id": 9}, "mode": "interface", "show_error": false, "theme": "default", "title": "Gradio", "version": "3.1.7\n"};</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Source Sans Pro"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=IBM Plex Mono"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
<script type="module" crossorigin src="./assets/index.09173af6.js"></script>
</head>
<body style="width: 100%; margin: 0; padding: 0; height: 100%">
<gradio-app>
<div
id="root"
style="display: flex; flex-direction: column; flex-grow: 1"
></div>
</gradio-app>
<script>
const ce = document.getElementsByTagName("gradio-app");
if (ce[0]) {
ce[0].addEventListener("domchange", () => {
document.body.style.padding = "0";
});
document.body.style.padding = "0";
}
</script>
</body>
</html>Can you please set share=True in launch() and try rerunning it? I think its a windows only error.
Change line 180 in txt2img_gradio.py from demo.launch() to demo.launch(share=True)?
mikr
commented
2 years ago I also saw this blank page and the browser DevTools showed the following error in the console:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
On Windows 10 with an untampered registry JavaScript files are registered with a content type of text/plain, search for HKEY_CLASSES_ROOT\.js\Content Type if you want to know more.
The scripts img2img_gradio.py and txt2img_gradio.py do not yet set a mimetype for .js files and neither does gradio or FastAPI or starlette or Python.
The easiest way to fix this is to add the following three lines after the last import "from ldm.util import instantiate_from_config" of each _gradio.py script:
import mimetypes mimetypes.init() mimetypes.add_type('application/javascript', '.js')
Now running img2img_gradio.py or txt2img_gradio.py again is the first step to make this work.
Because the browser can still have a cached copy of the index.js with the cached mimetype of text/plain I also had to hold down Shift while reloading the gradio application page so that the new mimetype is served properly and the JavaScript is actually executed.
After this both scripts worked as expected.
basujindal
commented
2 years ago I also saw this blank page and the browser DevTools showed the following error in the console:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
On Windows 10 with an untampered registry JavaScript files are registered with a content type of
text/plain, search forHKEY_CLASSES_ROOT\.js\Content Typeif you want to know more.The scripts
img2img_gradio.pyandtxt2img_gradio.pydo not yet set a mimetype for .js files and neither does gradio or FastAPI or starlette or Python. The easiest way to fix this is to add the following three lines after the last import "from ldm.util import instantiate_from_config" of each_gradio.pyscript:import mimetypes > mimetypes.init() > mimetypes.add_type('application/javascript', '.js')
Now running
img2img_gradio.pyortxt2img_gradio.pyagain is the first step to make this work. Because the browser can still have a cached copy of theindex.jswith the cached mimetype oftext/plainI also had to hold down Shift while reloading the gradio application page so that the new mimetype is served properly and the JavaScript is actually executed. After this both scripts worked as expected.
Hi, thank you for the suggestion. I have added lines you suggested and will push the changes in some time.
Michoko92
commented
2 years ago It works now, thank you very much!
aaronsnoswell
commented
2 years ago +1 for @mikr's fix! Thank you!
Hi,
I'm trying to display the Gradio interface (I installed it using the "pip install gradio" command), but when I run the python script and go to http://127.0.0.1:7860/, it only displays a blank page. If I use the GUI with the waifu repo, it works fine.
Here is the code of this (seemingly) blank page:
Do you have an idea why I can make it work except with this repo, please? I get no error at all. Thank you!