Update index.html
Browse files- index.html +25 -30
index.html
CHANGED
|
@@ -1,42 +1,37 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
<html
|
| 3 |
<head>
|
| 4 |
-
<
|
| 5 |
-
<
|
| 6 |
-
<
|
| 7 |
-
<title>Gradio Integration Example</title>
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
const
|
| 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();
|
| 40 |
</script>
|
| 41 |
</body>
|
| 42 |
</html>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
<head>
|
| 4 |
+
<title>Intégration API Gradio avec Bootstrap</title>
|
| 5 |
+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
|
| 6 |
+
<script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script>
|
|
|
|
| 7 |
</head>
|
| 8 |
<body>
|
| 9 |
+
<div class="container mt-5">
|
| 10 |
+
<div class="row">
|
| 11 |
+
<div class="col-12">
|
| 12 |
+
<input type="text" id="question" class="form-control" placeholder="Entrez votre question ici">
|
| 13 |
+
</div>
|
| 14 |
+
<div class="col-12 mt-3">
|
| 15 |
+
<button onclick="getResponse()" class="btn btn-primary">Soumettre</button>
|
| 16 |
+
</div>
|
| 17 |
+
<div class="col-12 mt-3">
|
| 18 |
+
<div id="response" class="border p-3"></div>
|
| 19 |
+
</div>
|
| 20 |
+
</div>
|
| 21 |
+
</div>
|
| 22 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
<script type="module">
|
| 24 |
import { client } from "@gradio/client";
|
| 25 |
|
| 26 |
+
async function getResponse() {
|
| 27 |
+
const question = document.getElementById('question').value;
|
| 28 |
+
const app = await client("https://docfile-gemi.hf.space/--replicas/2bkx7/");
|
| 29 |
+
const result = await app.predict("/predict", [question]);
|
| 30 |
+
|
| 31 |
+
const converter = new showdown.Converter();
|
| 32 |
+
const html = converter.makeHtml(result.data);
|
| 33 |
+
document.getElementById('response').innerHTML = html;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 34 |
}
|
|
|
|
|
|
|
| 35 |
</script>
|
| 36 |
</body>
|
| 37 |
</html>
|