Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Text Generation API</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" | |
| /> | |
| <style> | |
| body { | |
| background-color: #f8f9fa; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: auto; | |
| background: #fff; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .btn { | |
| width: 100%; | |
| } | |
| .output { | |
| margin-top: 20px; | |
| padding: 10px; | |
| background: #e9ecef; | |
| border-radius: 8px; | |
| max-height: 300px; | |
| /* Example: limit height with overflow */ | |
| overflow-y: auto; | |
| /* Example: add scrollbars if content exceeds */ | |
| } | |
| .spinner-border { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Text Generation API</h1> | |
| <form id="generateForm"> | |
| <div class="form-group"> | |
| <label for="generateText">Enter text:</label> | |
| <input | |
| type="text" | |
| class="form-control" | |
| id="generateText" | |
| name="text" | |
| required | |
| /> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| Generate with Hugging Face | |
| </button> | |
| <div class="spinner-border text-primary" role="status" id="hfSpinner"> | |
| <span class="sr-only">Loading...</span> | |
| </div> | |
| </form> | |
| <div id="output" class="output"></div> | |
| <form id="cohereForm"> | |
| <div class="form-group"> | |
| <label for="cohereText">Enter text:</label> | |
| <input | |
| type="text" | |
| class="form-control" | |
| id="cohereText" | |
| name="text" | |
| required | |
| /> | |
| </div> | |
| <button type="submit" class="btn btn-success"> | |
| Generate with Cohere AI | |
| </button> | |
| <div | |
| class="spinner-border text-success" | |
| role="status" | |
| id="cohereSpinner" | |
| > | |
| <span class="sr-only">Loading...</span> | |
| </div> | |
| </form> | |
| <div id="cohereOutput" class="output"></div> | |
| </div> | |
| <script> | |
| document | |
| .getElementById("generateForm") | |
| .addEventListener("submit", async function (event) { | |
| event.preventDefault(); | |
| document.getElementById("hfSpinner").style.display = "inline-block"; | |
| const text = document.getElementById("generateText").value; | |
| const response = await fetch( | |
| `/generate/?text=${encodeURIComponent(text)}` | |
| ); | |
| const data = await response.json(); | |
| document.getElementById("hfSpinner").style.display = "none"; | |
| document.getElementById("output").innerHTML = data.output; // Use innerHTML instead of textContent | |
| }); | |
| document | |
| .getElementById("cohereForm") | |
| .addEventListener("submit", async function (event) { | |
| event.preventDefault(); | |
| document.getElementById("cohereSpinner").style.display = | |
| "inline-block"; | |
| const text = document.getElementById("cohereText").value; | |
| const response = await fetch( | |
| `/cohereai/?text=${encodeURIComponent(text)}` | |
| ); | |
| const data = await response.json(); | |
| document.getElementById("cohereSpinner").style.display = "none"; | |
| document.getElementById("cohereOutput").innerHTML = data.output; // Use innerHTML instead of textContent | |
| }); | |
| </script> | |
| </body> | |
| </html> | |