Update index.html
Browse files- index.html +19 -8
index.html
CHANGED
|
@@ -8,21 +8,32 @@
|
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
<h1>Gradio Integration</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 11 |
<!-- Votre balise script pour le code JavaScript -->
|
| 12 |
<script type="module">
|
| 13 |
import { client } from "@gradio/client";
|
| 14 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 15 |
async function runExample() {
|
| 16 |
-
const response_0 = await fetch("https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png");
|
| 17 |
-
const exampleImage = await response_0.blob();
|
| 18 |
-
|
| 19 |
const app = await client("https://docfile-mariam-physique1.hf.space/--replicas/ptlbx/");
|
| 20 |
-
const result = await app.predict("/predict", [
|
| 21 |
-
"Hello!!", // string in 'pro' Textbox component
|
| 22 |
-
exampleImage, // blob in 'image' Image component
|
| 23 |
-
]);
|
| 24 |
|
| 25 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 26 |
}
|
| 27 |
|
| 28 |
runExample();
|
|
|
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
<h1>Gradio Integration</h1>
|
| 11 |
+
|
| 12 |
+
<input type="text" id="inputText" placeholder="Enter your text">
|
| 13 |
+
<input type="file" id="inputImage" accept="image/*">
|
| 14 |
+
<button id="predictButton">Predict</button>
|
| 15 |
+
<p id="result"></p>
|
| 16 |
+
|
| 17 |
<!-- Votre balise script pour le code JavaScript -->
|
| 18 |
<script type="module">
|
| 19 |
import { client } from "@gradio/client";
|
| 20 |
|
| 21 |
+
const inputText = document.getElementById('inputText');
|
| 22 |
+
const inputImage = document.getElementById('inputImage');
|
| 23 |
+
const predictButton = document.getElementById('predictButton');
|
| 24 |
+
const resultElement = document.getElementById('result');
|
| 25 |
+
|
| 26 |
async function runExample() {
|
|
|
|
|
|
|
|
|
|
| 27 |
const app = await client("https://docfile-mariam-physique1.hf.space/--replicas/ptlbx/");
|
|
|
|
|
|
|
|
|
|
|
|
|
| 28 |
|
| 29 |
+
predictButton.addEventListener('click', async () => {
|
| 30 |
+
const text = inputText.value;
|
| 31 |
+
const imageFile = inputImage.files[0];
|
| 32 |
+
const imageData = await imageFile.arrayBuffer();
|
| 33 |
+
|
| 34 |
+
const result = await app.predict("/predict", [text, imageData]);
|
| 35 |
+
resultElement.textContent = JSON.stringify(result.data);
|
| 36 |
+
});
|
| 37 |
}
|
| 38 |
|
| 39 |
runExample();
|