2023-02-03 12:45:29 +00:00
<!DOCTYPE html>
< html >
< head >
< title > DocsGPT 🦖 Preview< / title >
< link href = "{{url_for('static',filename='dist/css/output.css')}}" rel = "stylesheet" >
2023-02-09 00:07:38 +00:00
< 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') }}" >
2023-02-03 12:45:29 +00:00
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
2023-02-06 23:37:18 +00:00
2023-02-03 12:45:29 +00:00
< / head >
2023-02-06 23:37:18 +00:00
2023-02-03 12:45:29 +00:00
< body >
2023-02-23 11:29:52 +00:00
2023-02-06 23:37:18 +00:00
2023-02-03 12:45:29 +00:00
< header class = "bg-white p-2 flex justify-between items-center" >
2023-02-06 23:37:18 +00:00
< h1 class = "text-lg font-medium" > DocsGPT 🦖 Preview< / h1 >
< div >
2023-02-06 12:59:50 +00:00
< a href = "https://github.com/arc53/docsgpt" class = "text-blue-500 hover:text-blue-800 text-sm" > About< / a >
2023-02-08 19:41:35 +00:00
{% if not api_key_set %}
2023-02-06 23:37:18 +00:00
< button class = "text-sm text-yellow-500 hover:text-yellow-800" onclick = "resetApiKey()" > Reset Key< / button >
2023-02-08 19:41:35 +00:00
{% endif %}
2023-02-06 23:37:18 +00:00
< / div >
2023-02-03 12:45:29 +00:00
< / header >
2023-02-23 11:29:52 +00:00
<!-- Alert Info -->
< div class = "border flex justify-between
w-auto px-4 py-3 rounded relative
hidden" style="background-color: rgb(197, 51, 51);color: white;" id="error-alert" role="alert">
< span class = "block sm:inline" id = "text-error" > < / span >
< strong class = "text-xl align-center alert-del" style = "cursor: pointer;" id = "close" > × < / strong >
< / div >
2023-02-06 12:59:50 +00:00
< div class = "lg:flex ml-2 mr-2" >
< div class = "lg:w-3/4 min-h-screen max-h-screen" >
2023-02-03 14:02:21 +00:00
< div class = "w-full flex flex-col h-5/6" >
2023-02-06 12:59:50 +00:00
< div id = "messages-container" style = "overflow: auto;" class = "sm:max-lg:mb-[12rem]" >
2023-02-03 12:45:29 +00:00
2023-02-06 12:59:50 +00:00
< div id = "messages" class = "w-full flex flex-col mt-2" >
2023-02-03 12:45:29 +00:00
< 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" >
2023-02-03 21:46:38 +00:00
< p class = "text-sm" > How to merge tables?< / p >
2023-02-03 12:45:29 +00:00
< / div >
< div class = "bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start" >
2023-02-03 21:46:38 +00:00
< 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 >
2023-02-03 12:45:29 +00:00
< / div >
< / div >
< / div >
2023-02-06 12:59:50 +00:00
< 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 >
2023-02-03 12:45:29 +00:00
< / form >
< / div >
2023-02-23 11:29:52 +00:00
2023-02-03 12:45:29 +00:00
< / div >
< / div >
2023-02-06 12:59:50 +00:00
< div class = "lg:w-1/4 p-2 sm:max-lg:hidden" >
2023-02-05 23:01:40 +00:00
< 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 >
2023-02-03 14:02:21 +00:00
< 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 >
2023-02-07 01:17:45 +00:00
< 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 >
2023-02-07 21:53:29 +00:00
< label class = "block mb-2 text-sm font-medium text-gray-900" > Select documentation from DocsHUB< / label >
2023-02-07 01:17:45 +00:00
< 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" >
2023-02-07 22:30:29 +00:00
< option selected value = "default" > Choose documentation< / option >
2023-02-07 21:53:29 +00:00
< option value = "default" > Default< / option >
2023-02-07 01:17:45 +00:00
< / select >
2023-03-13 14:20:03 +00:00
< form action = "/api/upload" method = "post" enctype = "multipart/form-data" class = "mt-2" >
< input type = "file" name = "file" class = "py-4" id = "file-upload" >
< input type = "text" name = "user" value = "local" hidden >
< input type = "text" name = "name" placeholder = "Name:" >
< button type = "submit" class = "py-2 px-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" >
Upload
< / button >
< / form >
2023-02-03 12:45:29 +00:00
< / div >
< / div >
2023-02-06 23:37:18 +00:00
< div class = "flex items-center justify-center h-full" >
2023-02-23 11:29:52 +00:00
2023-02-06 23:37:18 +00:00
< / div >
2023-02-08 19:41:35 +00:00
2023-02-23 11:29:52 +00:00
2023-02-08 19:41:35 +00:00
{% if not api_key_set %}
2023-02-23 11:29:52 +00:00
< div class = "fixed z-10 overflow-y-auto top-0 w-full left-0 show" id = "modal" >
2023-02-06 23:37:18 +00:00
< 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 >
2023-02-08 19:41:35 +00:00
{% endif %}
2023-02-23 11:29:52 +00:00
2023-02-06 23:37:18 +00:00
< script >
2023-02-07 22:05:57 +00:00
function docsIndex() {
// loads latest index from https://raw.githubusercontent.com/arc53/DocsHUB/main/combined.json
// and stores it in localStorage
2023-03-13 14:20:03 +00:00
fetch('/api/combine')
2023-02-07 22:05:57 +00:00
.then(response => response.json())
.then(data => {
localStorage.setItem("docsIndex", JSON.stringify(data));
2023-02-08 23:48:59 +00:00
localStorage.setItem("docsIndexDate", Date.now());
2023-02-07 22:10:11 +00:00
generateOptions()
2023-02-07 22:05:57 +00:00
}
2023-02-07 22:10:11 +00:00
2023-02-07 22:05:57 +00:00
)
}
2023-02-07 22:10:11 +00:00
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");
2023-03-13 14:20:03 +00:00
if (docsIndex[key].location == 'docshub'){
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);
}
2023-02-15 18:40:23 +00:00
}
2023-02-07 22:10:11 +00:00
}
else {
2023-03-13 14:20:03 +00:00
option.text = docsIndex[key].name;
option.value = docsIndex[key].location + "/" + docsIndex[key].name;
select.add(option);
2023-02-07 22:10:11 +00:00
}
}
}
2023-02-08 19:41:35 +00:00
{% if not api_key_set %}
2023-02-06 23:37:18 +00:00
if (localStorage.getItem('apiKey') === null) {
console.log("apiKey is not set")
document.getElementById('modal').classList.toggle('hidden')
}
2023-02-08 19:41:35 +00:00
{% endif %}
2023-02-07 21:53:29 +00:00
if (localStorage.getItem('docsIndex') === null) {
console.log("docsIndex is not set")
docsIndex()
}
2023-02-08 19:41:35 +00:00
else if (localStorage.getItem("docsIndexDate") < Date.now ( ) - 900000 ) {
2023-02-09 00:07:38 +00:00
console.log("docsIndex is older than 15 minutes")
2023-02-08 19:41:35 +00:00
docsIndex()
}
2023-02-07 21:53:29 +00:00
2023-02-07 22:10:11 +00:00
generateOptions()
2023-02-07 21:53:29 +00:00
2023-02-06 23:37:18 +00:00
< / script >
2023-02-08 19:41:35 +00:00
{% if not api_key_set %}
2023-02-06 23:37:18 +00:00
< script src = "{{url_for('static',filename='src/authapi.js')}}" > < / script >
2023-02-08 19:41:35 +00:00
{% endif %}
2023-02-03 12:45:29 +00:00
< script src = "{{url_for('static',filename='src/chat.js')}}" > < / script >
2023-02-07 01:17:45 +00:00
< script src = "{{url_for('static',filename='src/choiceChange.js')}}" > < / script >
2023-02-03 12:45:29 +00:00
< / body >
< / html >
