Tobias Weise
affe3011fe
All checks were successful
Gitea Docker Redeploy / Redploy-App-on-self-via-SSH (push) Successful in 11s
445 lines
17 KiB
HTML
445 lines
17 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<title>Creative Bots</title>
|
||
<meta charset="utf-8">
|
||
<link rel="icon" href="favicon.svg">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
|
||
|
||
|
||
<!--
|
||
load the following async:?
|
||
-->
|
||
<script async="async" src="viz.js"></script>
|
||
<script async="async" src="viz_widget.js"></script>
|
||
<script async="async" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
|
||
|
||
<script async="async" src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||
|
||
<script>
|
||
X3DOM_SECURITY_OFF = true;
|
||
</script>
|
||
<script async="async" type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
|
||
<link async="async" rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'>
|
||
|
||
|
||
|
||
<script async="async" src="https://d3js.org/d3.v3.js"></script>
|
||
<script async="async" src="jsnetworkx.js"></script>
|
||
<script async="async" src="widget.js"></script>
|
||
|
||
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<!-- The Register Modal -->
|
||
<div class="modal fade" id="registerModal">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
|
||
<!-- Register Modal Header -->
|
||
<div class="modal-header">
|
||
<h4 class="modal-title">Register account</h4>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
|
||
<form>
|
||
|
||
<!-- Register Modal body -->
|
||
<div class="modal-body">
|
||
|
||
<div class="mb-3 mt-3">
|
||
<label for="register_email" class="form-label">Email:</label>
|
||
<input type="email" class="form-control" id="register_email" placeholder="Enter email" name="email">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="register_password" class="form-label">Password:</label>
|
||
<input type="password" class="form-control" id="register_password" placeholder="Enter password" name="pswd">
|
||
</div>
|
||
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" onclick="show_register_password()">
|
||
<label class="form-check-label">Show Password</label>
|
||
</div>
|
||
|
||
<script>
|
||
function show_register_password() {
|
||
let ele = document.getElementById("register_password");
|
||
if(ele.type === "password"){
|
||
ele.type = "text";
|
||
} else {
|
||
ele.type = "password";
|
||
}
|
||
}
|
||
</script>
|
||
</div>
|
||
<!-- Login Modal footer -->
|
||
<div class="modal-footer">
|
||
<button id="submit_register_btn" type="button" class="btn btn-primary">Register</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- The Login Modal -->
|
||
<div class="modal fade" id="myModal">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
|
||
<!-- Login Modal Header -->
|
||
<div class="modal-header">
|
||
<h4 class="modal-title">Login to account</h4>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
|
||
<form>
|
||
|
||
<!-- Login Modal body -->
|
||
<div class="modal-body">
|
||
|
||
<div class="mb-3 mt-3">
|
||
<label for="email" class="form-label">Email:</label>
|
||
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="pwd" class="form-label">Password:</label>
|
||
<input type="password" class="form-control" id="pass" placeholder="Enter password" name="pswd">
|
||
</div>
|
||
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" onclick="show_login_password()">
|
||
<label class="form-check-label">Show Password</label>
|
||
</div>
|
||
|
||
<script>
|
||
function show_login_password() {
|
||
let ele = document.getElementById("pass");
|
||
if(ele.type === "password"){
|
||
ele.type = "text";
|
||
} else {
|
||
ele.type = "password";
|
||
}
|
||
}
|
||
</script>
|
||
</div>
|
||
<!-- Login Modal footer -->
|
||
<div class="modal-footer">
|
||
<button id="submit_login_btn" type="button" class="btn btn-primary">Login</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div class="container-fluid p-3 bg-primary text-white text-center">
|
||
<h1>Creative Bots</h1>
|
||
<p>Create and talk to chatbots!</p>
|
||
</div>
|
||
|
||
<div class="container">
|
||
|
||
<!-- Offcanvas Sidebar -->
|
||
<div class="offcanvas offcanvas-start text-bg-dark" id="demo">
|
||
<div class="offcanvas-header">
|
||
<h1 class="offcanvas-title">Settings</h1>
|
||
<button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas"></button>
|
||
</div>
|
||
<div class="offcanvas-body">
|
||
|
||
|
||
<!-- Buttons to Open the Modal -->
|
||
<button id="register_btn" type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registerModal">Register</button>
|
||
<button id="login_btn" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Login</button>
|
||
<button id="logout_btn" type="button" class="btn btn-danger text-white">Logout</button>
|
||
|
||
<br>
|
||
|
||
<label for="system_prompt">System prompt:</label>
|
||
<textarea id="system_prompt" class="form-control" rows="8" name="text"></textarea>
|
||
|
||
<br>
|
||
|
||
<label for="views">Choose a view:</label>
|
||
<select name="views" id="view_select" class="form-select">
|
||
<option value="md">Markdown</option>
|
||
<option value="plain">Plain text</option>
|
||
</select>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div style="height: 5px !important;"></div>
|
||
|
||
<!-- Nav tabs -->
|
||
<ul class="nav nav-tabs">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" data-bs-toggle="tab" href="#home">Chat</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="tab" href="#create_bot_tab">Create bot</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-bs-toggle="tab" href="#tweak_bot_tab">Tweak bot</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane container active" id="home">
|
||
|
||
<div style="height: 10px !important;"></div>
|
||
|
||
<div id="scroll_div" class="card container" style="overflow:scroll; height: 400px;">
|
||
<table id="log" class="table" style="width: 100%;"></table>
|
||
</div>
|
||
|
||
<br>
|
||
<div class="input-group">
|
||
<span class="input-group-text">@
|
||
<select name="bots" id="bot_select" class="form-select"></select>
|
||
</span>
|
||
<input class="form-control" list="questions" name="question" id="user_input" placeholder="What is...">
|
||
<datalist id="questions">
|
||
<option value="Write all the ministries of Germany and their suborganizations in dot lang and return the source code!">
|
||
<option value="What is a whale?">
|
||
<option value="Is a monad a burito?">
|
||
<option value="Give the JSON of a graph linking Germanys 9 biggest cities">
|
||
</datalist>
|
||
<button id="submit_btn" class="btn btn-success" type="submit">Send</button>
|
||
</div>
|
||
|
||
<!-- Button to open the offcanvas sidebar -->
|
||
<button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
|
||
Settings...
|
||
</button>
|
||
|
||
</div>
|
||
<div class="tab-pane container fade" id="create_bot_tab">
|
||
|
||
<div style="height: 10px !important;"></div>
|
||
|
||
<i>Creating a new bot requires an account and login via settings!</i>
|
||
<br>
|
||
<br>
|
||
|
||
<form>
|
||
|
||
|
||
<label for="bot_name" class="form-label">Name:</label>
|
||
<input type="bot_name" class="form-control" id="bot_name" placeholder="MyNewBot">
|
||
|
||
<br>
|
||
|
||
<label for="bot_visibility">Visibility:</label>
|
||
<select name="bot_visibility" id="bot_visibility_select" class="form-select">
|
||
<option value="public">Public to All</option>
|
||
<option value="private">Private to User</option>
|
||
</select>
|
||
|
||
|
||
<br>
|
||
|
||
<label for="bot_description">Description:</label>
|
||
<textarea id="bot_description" class="form-control" rows="8" name="text" placeholder="A bot that cares."></textarea>
|
||
|
||
<br>
|
||
|
||
<label for="bot_llm">Language model:</label>
|
||
<select name="bot_llm" id="bot_llm_select" class="form-select">
|
||
<option value="llama3">Llama3</option>
|
||
</select>
|
||
|
||
<br>
|
||
|
||
<label for="bot_system_prompt">System prompt:</label>
|
||
<textarea id="bot_system_prompt" class="form-control" rows="8" name="text" placeholder="Answer all questions short and sweet!"></textarea>
|
||
|
||
|
||
<br>
|
||
|
||
<label for="avatar">Text documents:</label>
|
||
<input disabled class="form-control" type="file" id="avatar" name="avatar" multiple accept=".pdf,.xml,.txt,.md,.doc,.docx,.odt,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
|
||
|
||
|
||
<br>
|
||
|
||
<label for="url">Links:</label>
|
||
<input disabled class="form-control" type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required />
|
||
|
||
<hr>
|
||
|
||
<div class="row">
|
||
<div class="col"></div>
|
||
<div class="col"></div>
|
||
<div class="col"></div>
|
||
<div class="col"></div>
|
||
<div class="col">
|
||
<button id="create_bot_btn" disabled type="button" class="btn btn-primary text-white">Create bot</button>
|
||
</div>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<!-- alerts -->
|
||
|
||
<div id="alert_spawn"></div>
|
||
|
||
<!--
|
||
<div id="alert_bot_created" style="display: none;" class="alert alert-success alert-dismissible fade show">
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
<strong>Success!</strong> Bot created!
|
||
</div>
|
||
|
||
|
||
<div id="alert_not_bot_created" style="display: none;" class="alert alert-danger alert-dismissible fade show">
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
<strong>Couldn't create bot!</strong> Something killed that bot!
|
||
</div>
|
||
-->
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="tab-pane container fade" id="tweak_bot_tab">
|
||
|
||
<div style="height: 10px !important;"></div>
|
||
|
||
<i>Tweaking a new bot requires an account and login via settings!</i>
|
||
<br>
|
||
<br>
|
||
|
||
|
||
<form>
|
||
|
||
|
||
<label for="bot_name" class="form-label">Name:</label>
|
||
<input type="bot_name" class="form-control" id="bot_name" placeholder="MyNewBot">
|
||
|
||
<br>
|
||
|
||
<label for="bot_visibility">Visibility:</label>
|
||
<select name="bot_visibility" id="bot_visibility_select" class="form-select">
|
||
<option value="public">Public to All</option>
|
||
<option value="private">Private to User</option>
|
||
</select>
|
||
|
||
|
||
<br>
|
||
|
||
<label for="bot_description">Description:</label>
|
||
<textarea id="bot_description" class="form-control" rows="8" name="text" placeholder="A bot that cares."></textarea>
|
||
|
||
<br>
|
||
|
||
<label for="bot_llm">Language model:</label>
|
||
<select name="bot_llm" id="bot_llm_select" class="form-select">
|
||
<option value="llama3">Llama3</option>
|
||
</select>
|
||
|
||
<br>
|
||
|
||
<label for="bot_system_prompt">System prompt:</label>
|
||
<textarea id="bot_system_prompt" class="form-control" rows="8" name="text" placeholder="Answer all questions short and sweet!"></textarea>
|
||
|
||
|
||
<br>
|
||
|
||
<label for="avatar">Text documents:</label>
|
||
<input disabled class="form-control" type="file" id="avatar" name="avatar" multiple accept=".pdf,.xml,.txt,.md,.doc,.docx,.odt,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
|
||
|
||
|
||
<br>
|
||
|
||
<label for="url">Links:</label>
|
||
<input disabled class="form-control" type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required />
|
||
|
||
<hr>
|
||
|
||
<div class="row">
|
||
<div class="col"></div>
|
||
<div class="col"></div>
|
||
<div class="col"></div>
|
||
<div class="col"></div>
|
||
<div class="col">
|
||
<button id="change_bot_btn" disabled type="button" class="btn btn-primary text-white">Change bot</button>
|
||
</div>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<!-- alerts -->
|
||
|
||
<div id="change_bot_alert_spawn"></div>
|
||
|
||
<!--
|
||
<div id="alert_bot_created" style="display: none;" class="alert alert-success alert-dismissible fade show">
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
<strong>Success!</strong> Bot created!
|
||
</div>
|
||
|
||
|
||
<div id="alert_not_bot_created" style="display: none;" class="alert alert-danger alert-dismissible fade show">
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
<strong>Couldn't create bot!</strong> Something killed that bot!
|
||
</div>
|
||
-->
|
||
|
||
</form>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<footer>
|
||
<div class="container-fluid p-3 bg-primary text-white mt-5">
|
||
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<h3>A simple UI</h3>
|
||
<p>This is just a simple frontend with basic functionality hosted on the REST-backend.</p>
|
||
<p>A standalone frontend written in Vue.js is in development</p>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<h3>Tools used</h3>
|
||
<p>❯ Ollama, Llama3</p>
|
||
<p>❯ Elasticsearch, LangChain</p>
|
||
<p>❯ Flask, OpenAPI</p>
|
||
<p>❯ Bootstrap 5</p>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<h3>Who? Why?</h3>
|
||
<p>The guy on this site: <a class="text-white" href="https://tobiasweise.dev">tobiasweise.dev</a></p>
|
||
<p>For fun and learning...</p>
|
||
<p>...and maybe getting a job that employs the used skills.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="main.js"></script>
|
||
</body>
|
||
</html>
|