Tobias
1c36707eab
Some checks failed
Gitea Docker Redeploy / Redploy-App-on-self-via-SSH (push) Failing after 8m11s
384 lines
13 KiB
TypeScript
384 lines
13 KiB
TypeScript
'use client'
|
||
import Image from "next/image";
|
||
import { useState } from "react";
|
||
|
||
export default function Home() {
|
||
|
||
|
||
const [color, setColor] = useState("");
|
||
|
||
//const handleClick = () => setCount(count + 1);
|
||
|
||
|
||
|
||
|
||
function add_geo_location(){
|
||
function callback(position) {
|
||
let s = "My current position is: Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude + " !";
|
||
console.log(s);
|
||
document.getElementById("system_prompt").innerHTML += " " + s;
|
||
}
|
||
if(navigator.geolocation){
|
||
navigator.geolocation.getCurrentPosition(callback);
|
||
}
|
||
else {
|
||
console.log("Geolocation is not supported by this browser.");
|
||
}
|
||
}
|
||
|
||
|
||
return (<>
|
||
<div>
|
||
|
||
<div className="modal fade" id="registerModal">
|
||
<div className="modal-dialog modal-dialog-centered">
|
||
<div className="modal-content">
|
||
|
||
|
||
<div className="modal-header">
|
||
<h4 className="modal-title">Register account</h4>
|
||
<button type="button" className="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
|
||
<form>
|
||
|
||
|
||
<div className="modal-body">
|
||
|
||
<div className="mb-3 mt-3">
|
||
<label htmlFor="register_email" className="form-label">Email:</label>
|
||
<input type="email" className="form-control" id="register_email" placeholder="Enter email" name="email"/>
|
||
</div>
|
||
|
||
<div className="mb-3">
|
||
<label htmlFor="register_password" className="form-label">Password:</label>
|
||
<input type="password" className="form-control" id="register_password" placeholder="Enter password" name="pswd"/>
|
||
</div>
|
||
|
||
<div className="form-check">
|
||
<input type="checkbox" className="form-check-input" onclick="show_register_password()"/>
|
||
<label className="form-check-label">Show Password</label>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div className="modal-footer">
|
||
<button id="submit_register_btn" type="button" className="btn btn-primary">Register</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div className="modal fade" id="myModal">
|
||
<div className="modal-dialog modal-dialog-centered">
|
||
<div className="modal-content">
|
||
|
||
|
||
<div className="modal-header">
|
||
<h4 className="modal-title">Login to account</h4>
|
||
<button type="button" className="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
|
||
<form>
|
||
|
||
|
||
<div className="modal-body">
|
||
|
||
<div className="mb-3 mt-3">
|
||
<label htmlFor="email" className="form-label">Email:</label>
|
||
<input type="email" className="form-control" id="email" placeholder="Enter email" name="email"/>
|
||
</div>
|
||
|
||
<div className="mb-3">
|
||
<label htmlFor="pwd" className="form-label">Password:</label>
|
||
<input type="password" className="form-control" id="pass" placeholder="Enter password" name="pswd"/>
|
||
</div>
|
||
|
||
<div className="form-check">
|
||
<input type="checkbox" className="form-check-input" onclick="show_login_password()"/>
|
||
<label className="form-check-label">Show Password</label>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div className="modal-footer">
|
||
<button id="submit_login_btn" type="button" className="btn btn-primary">Login</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div id="fun" className="container-fluid p-3 bg-primary text-white text-center">
|
||
<h1>Creative Bots</h1>
|
||
<p>Create and talk to chatbots!</p>
|
||
</div>
|
||
|
||
<div className="container">
|
||
|
||
|
||
<div className="offcanvas offcanvas-start text-bg-dark" id="demo">
|
||
<div className="offcanvas-header">
|
||
<h1 className="offcanvas-title">Settings</h1>
|
||
<button type="button" className="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas"></button>
|
||
</div>
|
||
<div className="offcanvas-body">
|
||
|
||
|
||
|
||
<button id="register_btn" type="button" className="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registerModal">Register</button>
|
||
<br/>
|
||
<br/>
|
||
<button id="login_btn" type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Login</button>
|
||
<button id="logout_btn" type="button" className="btn btn-danger text-white">Logout</button>
|
||
|
||
<br/>
|
||
<br/>
|
||
|
||
<label htmlFor="system_prompt">System prompt:</label>
|
||
<textarea id="system_prompt" className="form-control" rows="8" name="text"></textarea>
|
||
|
||
<br/>
|
||
|
||
<button onClick={add_geo_location} onclick="add_geo_location()" type="button" className="btn btn-secondary text-white">Add Geo-Location</button>
|
||
|
||
|
||
|
||
<br/>
|
||
<br/>
|
||
|
||
<label htmlFor="views">Choose a view:</label>
|
||
<select name="views" id="view_select" className="form-select">
|
||
<option value="md">Markdown</option>
|
||
<option value="plain">Plain text</option>
|
||
</select>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{height: '5px !important'}}></div>
|
||
|
||
|
||
<ul className="nav nav-tabs">
|
||
<li className="nav-item">
|
||
<a className="nav-link active" data-bs-toggle="tab" href="#home">Chat</a>
|
||
</li>
|
||
<li className="nav-item">
|
||
<a id="tab2" className="nav-link disabled" data-bs-toggle="tab" href="#create_bot_tab">Create bot</a>
|
||
</li>
|
||
|
||
<li className="nav-item">
|
||
<a id="tab3" className="nav-link disabled" data-bs-toggle="tab" href="#tweak_bot_tab">Tweak bot</a>
|
||
</li>
|
||
|
||
<li className="nav-item">
|
||
<a id="tab4" className="nav-link disabled" data-bs-toggle="tab" href="#question_templates_tab">Question templates</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<div className="tab-content">
|
||
<div className="tab-pane container active" id="home">
|
||
|
||
<div style={{height: '10px !important'}}></div>
|
||
|
||
<div id="scroll_div" className="card container" style={{overflow: 'scroll', height: '400px'}}>
|
||
<table id="log" className="table" style={{width: '100%'}}></table>
|
||
</div>
|
||
|
||
<br/>
|
||
<div className="input-group">
|
||
<span className="input-group-text">
|
||
<select name="bots" id="bot_select" className="form-select"></select>
|
||
</span>
|
||
<input className="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" className="btn btn-success" type="button">❯</button>
|
||
</div>
|
||
<div className="input-group">
|
||
|
||
<button className="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
|
||
Settings...
|
||
</button>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div className="tab-pane container fade" id="create_bot_tab">
|
||
|
||
<div style={{height: '10px !important'}}></div>
|
||
|
||
<form>
|
||
|
||
|
||
<label htmlFor="bot_name" className="form-label">Name:</label>
|
||
<input type="bot_name" className="form-control" id="bot_name" placeholder="The displayed name of the bot."/>
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="bot_visibility">Visibility:</label>
|
||
<select name="bot_visibility" id="bot_visibility_select" className="form-select">
|
||
<option value="public">Public to All</option>
|
||
<option value="private">Private to User</option>
|
||
</select>
|
||
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="bot_description">Description:</label>
|
||
<textarea id="bot_description" className="form-control" rows="8" name="text" placeholder="A description of the bot and it's purpose."></textarea>
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="bot_llm">Language model:</label>
|
||
<select name="bot_llm" id="bot_llm_select" className="form-select">
|
||
<option value="llama3">Llama3</option>
|
||
</select>
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="bot_system_prompt">System prompt:</label>
|
||
<textarea id="bot_system_prompt" className="form-control" rows="8" name="text" placeholder="The prompt that defines the bot's main behaviour."></textarea>
|
||
|
||
<hr/>
|
||
|
||
<div className="row">
|
||
<div className="col"></div>
|
||
<div className="col"></div>
|
||
<div className="col"></div>
|
||
<div className="col"></div>
|
||
<div className="col">
|
||
<button id="create_bot_btn" disabled type="button" className="btn btn-primary text-white">Create bot</button>
|
||
</div>
|
||
</div>
|
||
|
||
<br/>
|
||
|
||
|
||
|
||
<div id="alert_spawn"></div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
|
||
<div className="tab-pane container fade" id="tweak_bot_tab">
|
||
|
||
<div style={{height: '10px !important'}}></div>
|
||
|
||
|
||
<form>
|
||
|
||
|
||
<label htmlFor="change_bots">Choose a bot:</label>
|
||
<select name="change_bots" id="change_bot_select" className="form-select">
|
||
<option value="md">Some bot</option>
|
||
</select>
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="bot_name" className="form-label">Name:</label>
|
||
<input type="bot_name" className="form-control" id="change_bot_name" placeholder="The displayed name of the bot."/>
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="bot_visibility">Visibility:</label>
|
||
<select name="bot_visibility" id="change_bot_visibility_select" className="form-select">
|
||
<option value="public">Public to All</option>
|
||
<option value="private">Private to User</option>
|
||
</select>
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="bot_description">Description:</label>
|
||
<textarea id="change_bot_description" className="form-control" rows="8" name="text" placeholder="A description of the bot and it's purpose."></textarea>
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="bot_llm">Language model:</label>
|
||
<select name="bot_llm" id="change_bot_llm_select" className="form-select">
|
||
<option value="llama3">Llama3</option>
|
||
</select>
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="bot_system_prompt">System prompt(behavior):</label>
|
||
<textarea id="change_bot_system_prompt" className="form-control" rows="8" name="text" placeholder="The prompt that defines the bot's main behaviour."></textarea>
|
||
|
||
<br/>
|
||
|
||
<h4>Knowledge resources:</h4>
|
||
<br/>
|
||
|
||
<label htmlFor="change_bot_rag_text_name">Text:</label>
|
||
<textarea id="change_bot_rag_text" className="form-control" rows="16" name="change_bot_rag_text_name" placeholder="A text that contains information used for the bot's answers.'"></textarea>
|
||
|
||
<br/>
|
||
|
||
<label htmlFor="avatar">Text documents:</label>
|
||
<input disabled className="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 htmlFor="rag_urls">Links:</label>
|
||
<div className="input-group">
|
||
<input disabled className="form-control" type="url" name="rag_urls" id="url" placeholder="https://example.com" pattern="https://.*" size="30" />
|
||
<button disabled id="add_url_btn" className="btn btn-success" type="button">Add</button>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<hr/>
|
||
|
||
<div className="row">
|
||
<div className="col"></div>
|
||
<div className="col"></div>
|
||
<div className="col"></div>
|
||
<div className="col">
|
||
<button id="change_bot_btn" disabled type="button" className="btn btn-primary text-white">Change bot</button>
|
||
</div>
|
||
<div className="col">
|
||
<button id="delete_bot_btn" disablxed type="button" className="btn btn-danger text-white">Delete bot</button>
|
||
</div>
|
||
</div>
|
||
|
||
<br/>
|
||
|
||
|
||
|
||
<div id="change_bot_alert_spawn"></div>
|
||
|
||
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</>
|
||
);
|
||
}
|