|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Random Command Generator</title> |
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
|
<style> |
|
.gradio-interface .input-row { |
|
display: none; |
|
} |
|
.gradio-interface .output-row { |
|
margin-bottom: 0; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container mt-5"> |
|
<div class="row justify-content-center align-items-center"> |
|
<div class="col-12 col-md-8 col-lg-6"> |
|
<img src="{{image}}" class="img-fluid mb-3"> |
|
<div id="gradio"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<script src="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/gradio.min.js"></script> |
|
<script> |
|
const iface = gradio.Interface('http://localhost:5000', {inputs: null, outputs: 'text'}); |
|
iface.ready(() => { |
|
const generateButton = iface.addButton({label: 'Generate New Command', backgroundColor: '#007bff'}); |
|
generateButton.on('click', () => { |
|
iface.run(); |
|
}); |
|
}); |
|
iface.render(document.getElementById('gradio')); |
|
</script> |
|
</body> |
|
</html> |
|
|
