mirror of
https://github.com/arc53/DocsGPT
synced 2024-11-05 21:21:02 +00:00
175 lines
8.9 KiB
HTML
175 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>DocsGPT 🦖 Preview</title>
|
|
<link href="{{url_for('static',filename='dist/css/output.css')}}" rel="stylesheet">
|
|
<link rel="favicon" href="{{ url_for('static', filename='favicon/favicon.ico') }}">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='favicon/apple-touch-icon.png') }}">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon/favicon-32x32.png') }}">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon/favicon-16x16.png') }}">
|
|
<link rel="manifest" href="{{ url_for('static', filename='favicon//site.webmanifest') }}">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<header class="bg-white p-2 flex justify-between items-center">
|
|
<h1 class="text-lg font-medium">DocsGPT 🦖 Preview</h1>
|
|
<div>
|
|
<a href="https://github.com/arc53/docsgpt" class="text-blue-500 hover:text-blue-800 text-sm">About</a>
|
|
{% if not api_key_set %}
|
|
<button class="text-sm text-yellow-500 hover:text-yellow-800" onclick="resetApiKey()">Reset Key</button>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
<div class="lg:flex ml-2 mr-2">
|
|
<div class="lg:w-3/4 min-h-screen max-h-screen">
|
|
<div class="w-full flex flex-col h-5/6">
|
|
<div id="messages-container" style="overflow: auto;" class="sm:max-lg:mb-[12rem]">
|
|
|
|
<div id="messages" class="w-full flex flex-col mt-2" >
|
|
<div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
|
|
<p class="text-sm">Hello, ask me anything about this library. Im here to help</p>
|
|
</div>
|
|
<div class="bg-blue-500 text-white p-2 rounded-lg mb-2 self-end">
|
|
<p class="text-sm">How to merge tables?</p>
|
|
</div>
|
|
<div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
|
|
<p class="text-sm">To merge two tables in pandas, you can use the pd.merge() function. The basic syntax is:<br>
|
|
pd.merge(left, right, on, how)<br>
|
|
where left and right are the two tables to merge, on is the column to merge on, and how is the type of merge to perform.<br>
|
|
For example, to merge the two tables df1 and df2 on the column 'key', you can use:<br>
|
|
pd.merge(df1, df2, on='key', how='left')<br>
|
|
This will return a new DataFrame with all the columns from both tables, and only the rows that match the 'key' column. </p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed bottom-0 w-full mt-4 mb-2 lg:w-3/4">
|
|
<form id="message-form" autocomplete="off" class="flex items-stretch">
|
|
<input autocomplete="off" id="message-input" class="bg-white p-2 rounded-lg ml-2 text-sm w-full" type="text" placeholder="Type your message here...">
|
|
<button id="button-submit" class="bg-blue-500 text-white p-2 rounded-lg ml-2 mr-2 text-sm sm:max-lg:p-5" type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="lg:w-1/4 p-2 sm:max-lg:hidden">
|
|
<p class="text-sm">This is a chatbot that uses the GPT-3, Faiss and <a href="https://github.com/hwchase17/langchain" class="text-blue-500 hover:text-blue-800">LangChain</a> to answer questions</p>
|
|
<br>
|
|
<p class="text-sm">The source code is available on <a href="https://github.com/arc53/docsgpt" class="text-blue-500 hover:text-blue-800">Github</a></p><br>
|
|
<p class="text-sm">Currently It uses python pandas documentation, so it will respond to information relevant to pandas. If you want to train it on different documentation - <a href="https://github.com/arc53/docsgpt/wiki/How-to-train-on-other-documentation" class="text-blue-500 hover:text-blue-800"> please follow this guide </a></p><br>
|
|
<p class="text-sm">If you want to launch it on your own server - <a href="https://github.com/arc53/docsgpt/wiki/How-to-train-on-other-documentation" class="text-blue-500 hover:text-blue-800"> follow this guide </a></p><br>
|
|
<label class="block mb-2 text-sm font-medium text-gray-900">Select documentation from DocsHUB</label>
|
|
<select id="select-docs" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
<option selected value="default">Choose documentation</option>
|
|
<option value="default">Default</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center h-full">
|
|
|
|
</div>
|
|
|
|
{% if not api_key_set %}
|
|
<div class="fixed z-10 overflow-y-auto top-0 w-full left-0 hidden" id="modal">
|
|
<div class="flex items-center justify-center min-height-100vh pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 transition-opacity">
|
|
<div class="absolute inset-0 bg-gray-900 opacity-75" />
|
|
</div>
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
|
|
<div class=" text-sm inline-block align-center bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
|
|
<form id="api-key-form">
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
|
<h2>Before you can start using DocsGPT we need you to provide an API key for llm. Currently, we support only OpenAI but soon many more. You can find it <a class="text-blue-500 hover:text-blue-800" href="https://platform.openai.com/account/api-keys">here</a></h2><br>
|
|
<label>OpenAI API key:</label>
|
|
|
|
<input id="api-key-input" type="password" class="w-full bg-gray-100 p-2 mt-2 mb-3" placeholder="Paste you Api Key here">
|
|
|
|
</div>
|
|
<div class="bg-gray-200 px-4 py-3 text-right">
|
|
<button type="submit" class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700 mr-2">Save</button>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<script>
|
|
function docsIndex() {
|
|
// loads latest index from https://raw.githubusercontent.com/arc53/DocsHUB/main/combined.json
|
|
// and stores it in localStorage
|
|
fetch('https://d3dg1063dc54p9.cloudfront.net/combined.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
localStorage.setItem("docsIndex", JSON.stringify(data));
|
|
localStorage.setItem("docsIndexDate", Date.now());
|
|
generateOptions()
|
|
}
|
|
|
|
)
|
|
|
|
}
|
|
function generateOptions(){
|
|
docsIndex = localStorage.getItem('docsIndex')
|
|
// create option on select with id select-docs
|
|
var select = document.getElementById("select-docs");
|
|
// convert docsIndex to json
|
|
docsIndex = JSON.parse(docsIndex)
|
|
// create option for each key in docsIndex
|
|
for (var key in docsIndex) {
|
|
var option = document.createElement("option");
|
|
if (docsIndex[key].name == docsIndex[key].language) {
|
|
option.text = docsIndex[key].name + " " + docsIndex[key].version;
|
|
option.value = docsIndex[key].name + "/" + ".project" + "/" + docsIndex[key].version + "/{{ embeddings_choice }}/";
|
|
if (docsIndex[key].model == "{{ embeddings_choice }}") {
|
|
select.add(option);
|
|
}
|
|
}
|
|
else {
|
|
option.text = docsIndex[key].name + " " + docsIndex[key].version;
|
|
option.value = docsIndex[key].language + "/" + docsIndex[key].name + "/" + docsIndex[key].version + "/{{ embeddings_choice }}/";
|
|
if (docsIndex[key].model == "{{ embeddings_choice }}") {
|
|
select.add(option);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
{% if not api_key_set %}
|
|
if (localStorage.getItem('apiKey') === null) {
|
|
console.log("apiKey is not set")
|
|
document.getElementById('modal').classList.toggle('hidden')
|
|
}
|
|
{% endif %}
|
|
if (localStorage.getItem('docsIndex') === null) {
|
|
console.log("docsIndex is not set")
|
|
docsIndex()
|
|
}
|
|
else if (localStorage.getItem("docsIndexDate") < Date.now() - 900000) {
|
|
console.log("docsIndex is older than 15 minutes")
|
|
docsIndex()
|
|
}
|
|
|
|
generateOptions()
|
|
|
|
</script>
|
|
{% if not api_key_set %}
|
|
<script src="{{url_for('static',filename='src/authapi.js')}}"></script>
|
|
{% endif %}
|
|
<script src="{{url_for('static',filename='src/chat.js')}}"></script>
|
|
<script src="{{url_for('static',filename='src/choiceChange.js')}}"></script>
|
|
|
|
</body>
|
|
</html>
|