Upload 15 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+db/bitcoin_data.db filter=lfs diff=lfs merge=lfs -text

ChatBot.py

@@ -0,0 +1,133 @@
+from langchain_community.utilities import SQLDatabase
+from langchain_tavily import TavilySearch
+from langgraph.prebuilt import create_react_agent
+from langchain_community.agent_toolkits import SQLDatabaseToolkit
+from langchain.chat_models import init_chat_model
+from dotenv import load_dotenv
+from langchain.prompts import ChatPromptTemplate
+from langgraph.graph import StateGraph,START,END
+from typing import TypedDict
+from langchain import hub
+import os
+load_dotenv()
+mistralapi=os.environ['MISTRAL']
+taviliy=os.environ['TAVILY']
+
+llm=init_chat_model("ministral-8b-latest",model_provider="mistralai",api_key=mistralapi)
+
+db=SQLDatabase.from_uri("sqlite:///db/bitcoin_data.db")
+toolkit=SQLDatabaseToolkit(db=db,llm=llm)
+sqltools=toolkit.get_tools()
+table_info=db.get_table_info()
+sqlprompt=hub.pull("langchain-ai/sql-agent-system-prompt")
+sqlprompt=sqlprompt.format(dialect="SQLite", top_k=5)
+
+class GraphState(TypedDict):
+    userinput:str
+    movewhere:str
+    aimessages:list[str]
+    query:str
+    finalanswer:str
+
+
+def router(state:GraphState):
+    userinput=state["userinput"]
+    prompt=ChatPromptTemplate.from_messages([
+        ("system","You are assistant who have to decide what user need right now reponsd with 'News' or 'Analysis' or 'Research' or 'all' 'none' dont use any puctuation, symbols or extra text in the reponse. Remember when you respond with analysis we run sql queries on a database with bitcoin high low volume and rsi mcad etc respond this only when the user asks about statistical analysis on the bitcoin data. When you select Research we search internet for any financial oredictions or articles. You must first understand prompt and check which option is best for better responses. Respond with 'all' when i the query of user is diverse like getting some financial advice or require some extra info other than seraching old database. If none of the options is required or question is not about bitcoin or related terms or personalities respond 'none'"),
+        ("user",f"Here is the input from user '{userinput}'")
+    ])
+    chain=prompt | llm
+    response=chain.invoke({'userinput':userinput})
+    print(response.content)
+    state['movewhere']=response.content.lower()
+    return state
+
+def querygen(state:GraphState):
+    userinput=state['userinput']
+    prompt=ChatPromptTemplate.from_messages([
+        ("system","You are a assistant who would generate questions for an agent which generates sql queries for data {datainfo}. Analyze the user input and generate the questions for that agent that gives maximum information that user need for better answer. You should ask only 5 statistical questions without heading just simple questions"),
+        ("user","Here is a prompt from user '{userinput}'")
+    ])
+    chain=prompt | llm
+    response=chain.invoke({"datainfo":table_info,'userinput':userinput})
+    state['query']=response.content
+    return state
+
+def news(state:GraphState):
+    news_update=TavilySearch(
+        tavily_api_key=taviliy,
+        max_results=5,
+        topic="news"
+    )   
+    userinput=state['userinput']
+    searchagent=create_react_agent(llm,tools=[news_update])
+    response=searchagent.invoke({"messages":[{"role":"user","content":userinput}]})
+    state['aimessages'].append(response['messages'][-1].content)
+    return state
+
+def analysis(state:GraphState):
+    queries=state['query']
+    sqlagent=create_react_agent(llm,tools=sqltools,prompt=sqlprompt)
+    response=sqlagent.invoke({"messages":[{"role":"user","content":queries}]})
+    state['aimessages'].append(response['messages'][-1].content)
+    return state
+
+def search(state:GraphState):
+    userinput=state['userinput']
+    finance_update=TavilySearch(
+        tavily_api_key=taviliy,
+        max_results=5,
+        topic="finance"
+    )
+    searchagent=create_react_agent(llm,tools=[finance_update])
+    response=searchagent.invoke({"messages":[{"role":"user","content":userinput}]})
+    state['aimessages'].append(response['messages'][-1].content)
+    return state
+
+def finalnode(state:GraphState):
+    userinput=state['userinput']
+    aimessages=state['aimessages']
+    prompt=ChatPromptTemplate.from_messages([
+        ("system","You are an agent who have to write final comprehensive answer based on user query and the provided docs given by different AI agents here are some docs that might help {aimessages}"),
+        ("user","{userinput}")
+    ])
+    chain=prompt | llm
+    response=chain.invoke({"aimessages":aimessages,"userinput":userinput})
+    state['finalanswer']=response.content
+    return state
+
+def runall(state:GraphState):
+    return state
+
+def random(state:GraphState):
+    response=llm.invoke(state['userinput'])
+    state['finalanswer']=response.content
+    return state
+
+builder=StateGraph(GraphState)
+builder.add_node("decide",router)
+builder.add_node("random",random)
+
+builder.add_edge(START,"decide")
+builder.add_conditional_edges("decide",lambda state:state['movewhere'],
+{
+  "news":"news",
+  "analysis":"querygen",
+  "research":"search",
+  "none":"random",
+  "all":"runall"
+})
+builder.add_sequence([
+    ("runall",runall),
+    ("queerygenall",querygen),
+    ("analyzeall",analysis),
+    ("newsall",news),
+    ("searchall",search),
+    ("finalnodeall",finalnode)
+])
+builder.add_sequence([("search",search),("finalsearch",finalnode)])
+builder.add_sequence([("news",news),("finalnews",finalnode)])
+builder.add_sequence([("querygen",querygen),("analyze",analysis),("finalanalyze",finalnode)])
+builder.add_edge("random",END)
+
+graph=builder.compile()

Data/modeldata.csv

@@ -0,0 +1 @@
+open_time,open,high,low,close,volume,close_time,quote_asset_volume, number_of_trades, taker_buy_base_asset_volume,taker_buy_quote_asset_volume

Data/portfolio.json

@@ -0,0 +1,7 @@
+{
+    "amount":1000000,
+    "trades":[],
+    "tradesDone":[],
+    "PNL":0,
+    "bitcoin_holdings":0
+}

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,211 @@
+import onnxruntime as ort
+import pickle
+import joblib
+import numpy as np
+import json
+import os
+import requests
+import pandas as pd
+from flask import Flask,render_template,jsonify,request
+import plotly.graph_objects as go
+from livereload import Server
+from dotenv import load_dotenv
+from ta.momentum import RSIIndicator
+from ta.trend import MACD, EMAIndicator
+from ta.volatility import AverageTrueRange
+import plotly.io as pio
+import ChatBot as cb
+
+load_dotenv()
+api=os.environ['API_KEY']
+head={
+    "x-cg-demo-api-key":api
+}
+params={
+    "vs_currency":"usd",
+    "days":1
+}
+lines=requests.get("https://api.coingecko.com/api/v3/coins/bitcoin/ohlc",params=params,headers=head).json()
+
+def preprocess(lines):
+    cols=["open_time","open","high","low","close"]
+    data=pd.DataFrame(lines,columns=cols)
+    data['open_time']=pd.to_datetime(data['open_time'],unit='ms')
+    data['rsi']=RSIIndicator(close=data["close"],window=14,fillna=0).rsi()
+    macd=MACD(close=data["close"])
+    data["macd"]=macd.macd()
+    data['macd_signal']=macd.macd_signal()
+    data['ema_20']=EMAIndicator(close=data['close'],window=14,fillna=0).ema_indicator()
+    data['atr']=AverageTrueRange(high=data['high'],low=data['low'],close=data['close'],window=14).average_true_range()
+    data['weekday']=data['open_time'].dt.day_of_week
+    data['day_of_year']=data['open_time'].dt.day_of_year
+    data['hour']=data['open_time'].dt.hour
+    data['month_end']=data['open_time'].dt.is_month_end.astype(np.float32)
+    data['month_start']=data['open_time'].dt.is_month_start.astype(np.float32)
+    data['quarter_start']=data['open_time'].dt.is_quarter_start.astype(np.float32)
+    data["quarter_end"]=data['open_time'].dt.is_quarter_end.astype(np.float32)
+    data["year"]=data['open_time'].dt.year
+    data['month']=data['open_time'].dt.month
+    data['is_recent']=data['open_time'].dt.year>2023
+    data['is_recent']=data['is_recent'].astype(np.float64)
+    data=data[data["open_time"].dt.minute==0].reset_index(drop=True)
+    return data
+data=preprocess(lines)
+
+session=ort.InferenceSession("models/lstm_model.onnx")
+
+with open("models/hourly_stat.pkl","rb") as f:
+    hourly_model=pickle.load(f)
+
+with open("models/daily_stat.pkl","rb") as f:
+    daily_model=pickle.load(f)
+
+input_scaler=joblib.load("models/input_scaler.pkl")
+
+output_scaler=joblib.load("models/ouput_scaler.pkl")
+
+with open("Data/news.json","r") as f:
+    news=json.load(f)
+
+with open("Data/portfolio.json","r") as f:
+    portfolio=json.load(f)
+
+def predict_onnx(data):
+    ourdata=data.drop(columns=['open_time'])
+    impfactor=np.linspace(0,1,15).reshape(15,1)
+    scaled=input_scaler.transform(ourdata)
+    X=np.append(scaled,impfactor,axis=1).reshape(1,15,20)
+    input_name = session.get_inputs()[0].name
+    output = session.run(None, {input_name: X.astype(np.float32)})
+    return pd.DataFrame({
+        "ds":data[-15:]['open_time']+pd.Timedelta(hours=1),
+        "x":output_scaler.inverse_transform(output[0][0].reshape(1,15)).reshape(15)
+    })
+def precict_ml(data):
+    prediction=hourly_model.predict(data.rename(columns={"open_time":"ds","close":"previous_close"}).fillna(0))
+    return pd.DataFrame({
+        "ds":data['open_time']+pd.Timedelta(hours=1),
+        "y":prediction['yhat']
+    })
+def plot_chart():
+    temp=pd.DataFrame()
+    batchsize=15
+    for i in range(0,len(data),batchsize):
+        input_data=data[len(data)-i-batchsize:len(data)-i].fillna(0)
+        if len(input_data)<batchsize:
+            prediction=predict_onnx(data[:15].fillna(0))[:-(batchsize-(len(data)-i))]
+            temp=pd.concat([prediction,temp])
+            break
+        prediction=predict_onnx(input_data)
+        temp=pd.concat([prediction,temp])
+    predicted=temp
+    mlprediction=precict_ml(data)
+    fig=go.Figure()
+    fig.add_trace(go.Candlestick(
+         x=data["open_time"],
+         open=data["open"],
+         high=data['high'],
+         low=data['low'],
+         close=data['close'],
+         name="liveprice"
+    ))
+    fig.add_trace(go.Scatter(
+         x=predicted['ds'],
+         y=predicted['x'],
+         name="lstm_prediction"
+    ))
+    fig.add_trace(go.Scatter(
+        x=mlprediction['ds'],
+        y=mlprediction['y'],
+        name="MlPrediction"
+    )
+    )
+    fig.update_layout(
+        xaxis=dict(
+            range=[data['open_time'].iloc[-15],data['open_time'].iloc[-1]],
+            rangeslider=dict(visible=False),
+            fixedrange=False
+        ),
+        paper_bgcolor='rgba(113, 78, 161, 0.5)',
+        plot_bgcolor='rgba(113, 78, 161, 0.5)',
+        font_color="white",
+        dragmode="pan"
+    )
+    return fig
+
+def Predict20Days():
+    today=pd.to_datetime("today").normalize()
+    timerange=pd.date_range(start=today,end=today+pd.Timedelta(days=20),freq="d")
+    input_data=pd.DataFrame(timerange,columns=['ds'])
+    pred=daily_model.predict(input_data)
+    return {
+        "ds":timerange,
+        "y":pred['yhat']
+    }
+
+def make_20_days_chart():
+    df=Predict20Days()
+    fig=go.Figure()
+    fig.add_trace(go.Scatter(
+        x=df['ds'],
+        y=df['y']
+    ))
+    fig.update_layout(
+        paper_bgcolor='rgba(113, 78, 161, 0.5)',
+        plot_bgcolor='rgba(113, 78, 161, 0.5)',
+        font_color="white",
+        dragmode="pan"
+    )
+    return fig
+
+app=Flask(__name__)
+app.config['TEMPLATES_AUTO_RELOAD'] = True
+@app.route("/")
+def front():
+    figure=plot_chart()
+    next20days=make_20_days_chart()
+    config={
+        "displayModeBar":False
+    }
+    plot=pio.to_html(figure,full_html=False,config=config)
+    plot2=pio.to_html(next20days,full_html=False,config=config)
+    return render_template("index.html",chart=plot,newsset=news,pred20=plot2)
+
+@app.route("/update_chart")
+def give_update():
+    global lines
+    global data
+    newlines=requests.get("https://api.coingecko.com/api/v3/coins/bitcoin/ohlc",params=params,headers=head).json()
+    lines.append(newlines)
+    data=preprocess(lines)
+    data=data.drop_duplicates()
+    predonnx=predict_onnx(data.iloc[-15:].fillna(0))
+    predml=precict_ml(data.iloc[[-1]])
+    return jsonify({
+        "x":[str(data['open_time'].iloc[-1]),str(predonnx['ds']),str(predml['ds'])],
+        "open":float(data['open'].iloc[-1]),
+        "high":float(data["high"].iloc[-1]),
+        "low":float(data['low'].iloc[-1]),
+        "close":float(data['close'].iloc[-1]),
+        "y":[float(predonnx['x']),float(predml['y'])]
+    })
+
+@app.route("/get_response",methods=['POST'])
+def chat():
+    res=request.get_json()
+    query=res['text']
+    inputinvoke={
+        "userinput":query,
+        "movewhere":"",
+        "aimessages":[],
+        "query":"",
+        "finalanswer":""
+    }
+    response=cb.graph.invoke(inputinvoke)
+    return jsonify(response=response['finalanswer'])
+if __name__=="__main__":
+    server=Server(app.wsgi_app)
+    server.watch("templates/*.html")
+    server.serve(open_url_delay=True,port=8000)
+
+

db/bitcoin_data.db

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:46994e6de2be5be140de2d7391dfa5f955b26228954183b9c6138bb003e2eb10
+size 10829824

models/daily_stat.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3830450ddbf7da2b6a487a63156d11524fb61fbbb3acc815c7da20a06a5a82a5
+size 264600

models/hourly_stat.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a4ac589ffced0ce751bc5fd9b70c0b9d95b2d99c9a5135d45ddaecbb1ab0277
+size 11240526

models/input_scaler.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4609bf36aac5b361cd26ce883c87ec7890fcd90019c563159764e0bbf42ebcaf
+size 1871

models/lstm_model.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:26160009c3b3db4579423a9bca33a517dc28e25848c4c4a006a7383fcedd8449
+size 104079

models/ouput_scaler.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fa3b69b83f876def26db98b9c9c3cc60d11839aca37bdd800fdbf3c6e7c74f0a
+size 975

requirements.txt

@@ -0,0 +1,17 @@
+onnxruntime
+pickle-mixin
+joblib
+numpy
+jsonlib
+requests
+pandas
+flask
+plotly
+livereload
+python-dotenv
+ta
+langchain
+langgraph
+langchain_community
+langchain_tavily
+uvicorn

templates/index.html

@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>
+    <title>Trading Analysis</title>
+</head>
+<style>
+    .page{
+        display: flex;
+        flex-direction: row;
+    }
+    .tab1{
+        flex: 0 0 70%;
+        height:100vh;
+        scrollbar-width: none;
+        overflow: auto;
+    }
+    .tab2{
+        flex: 0 0 30%;
+        height:100vh;
+        scrollbar-width: none;
+        border-left: 2px solid gray;
+        overflow: auto;
+    }
+    #news{
+        margin: 20px;
+    }
+    #header{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+    #boticon{
+        position:relative;
+        border-radius: 20px;
+        width:100px;
+        height:40px;
+        top:2.5px;
+        border: none;
+        overflow: hidden;
+        z-index: 2;
+        font-weight: bolder;
+        background-color:white;
+        color:#1a1a1a;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    }
+    #border{
+        position:absolute;
+        display: flex;
+        z-index: 0;
+        bottom: 5%;
+        right: 5%;
+        align-content: center;
+        justify-content: center;
+        border-radius: 20px;
+        width:105px;
+        height:45px;
+        background:linear-gradient(75deg,blue,red,greenyellow);
+    }
+    #boticon::before{
+        content:"";
+        position: absolute;
+        z-index:-1;
+        top:0;
+        left: -100%;
+        width:100px;
+        height:40px;
+        background:linear-gradient(75deg,blue,red,greenyellow);
+        transition: transform 1.5s ease;
+        transform: translateX(0);
+    }
+    #boticon:hover::before{
+        transform: translateX(100%);
+    }
+    #buy,#sell{
+        width:150px;
+        height:50px;
+        border-radius: 20px;
+    }
+    #buy{
+        background-color: rgb(21, 223, 21);
+    }
+    #sell{
+        background-color: red;
+    }
+    #buttons{
+        display: flex;
+        justify-content: space-around;
+    }
+    #menu{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 20px;
+    }
+    #buysell{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        height: 300px;
+        margin:50px;
+        background-color: rgba(70, 57, 96, 0.8);
+        border-radius: 20px;
+        box-shadow: 0 0 20px rgba(113, 78, 161, 0.6);
+    }
+    body{
+        background-color: rgba(57, 57, 96, 0.9);
+    }
+    a{
+        color:#66ccff;
+    }
+    a:hover{
+        color:#ffffff;
+    }
+    h2{
+        color:#c4b5fd;
+        text-align: center;
+    }
+    #description{
+        color:#f0f0f0;
+    }
+    #qty{
+        border:none;
+        background-color: inherit;
+        outline: none;
+        border-bottom: 2px solid black ;
+    }
+    #news{
+        border-radius: 10px;
+        box-shadow:  0 0 20px rgba(113, 78, 161, 0.5);
+        padding: 20px;
+    }
+    #news:hover{
+        box-shadow:  0 0 20px rgba(113, 64, 180, 0.8);
+    }
+    .livechart{
+        border-radius: 20px;
+        overflow: hidden;
+        margin:10px;
+    }
+    h3{
+        color:#f0f0f0;
+    }
+    #chatbot{
+        display: none;
+        flex-direction: column;
+        bottom:20%;
+        top:20%;
+        left:20%;
+        right:20%;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position:fixed;
+        border-radius: 20px;
+        background-color: black;
+        color:greenyellow;
+        box-shadow: 0 0 20px rgb(240, 185, 252);
+ 
+    }
+    #X{
+        position: absolute;
+        top:0px;
+        right:20px;
+    }
+    #X:hover{
+        border: 1px solid white;
+    }
+    #chatheading{
+        position: absolute;
+        top:30px;
+    }
+    #textbox{
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        right:0px;
+    }
+    #inp{
+        width: 82%;
+        height: 30px;
+        border-radius: 20px;
+        padding: 7px;
+        font-size: xx-large;
+    }
+    #send{
+        border: 20px;
+        background-color: rgb(34, 191, 26);
+        border: 2px solid rgb(47, 166, 43);
+        color: black;
+        font-size: xx-large;
+        border-radius: 20px;
+    }
+    #send:active{
+        background-color: rgb(158, 255, 149);
+    }
+    .question,.response{
+        border-radius: 20px;
+        background-color: navy;
+        padding:20px;
+        display: inline-block;
+    }
+    .question{
+        align-self: flex-start;
+    }
+    .response{
+        align-self: flex-end;
+    }
+    #qapair{
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        width: 100%;
+        padding: 20px;
+        overflow-y: auto;
+        max-height: 50%;
+        box-sizing: border-box;
+    }
+</style>
+<body>
+    <div class="bottom_page">
+    <div class="page">
+        <div class="tab1">
+            <h2>Live Price</h2>
+            <div class="livechart" id="stock_hourly_price">{{chart | safe}}</div>
+            <h2>20 Days Predicion</h2>
+            <div class="livechart" id="next20days">{{pred20 | safe}}</div>
+            <div class="portfolio">
+                <div id="buysell">
+                    <h2>Buy Sell</h2>
+                    <h3>Balance:{{amount}}</h3>
+                    <h3>Coins:{{qty}}</h3>
+                    <input type="text" id="qty" placeholder="Amount" style="margin-bottom:10px;color:white;">
+                    <div id="buttons">
+                        <button id="buy">Buy</button>
+                        <button id="sell">Sell</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="tab2">
+            <h2>News</h2>
+            {% for news in newsset %}
+            <div id="news">
+                <a href="{{newsset[news]['url']}}">{{newsset[news]['title']}}</a>
+                <div id="description">{{newsset[news]['snippet']}}</div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+   <div id="border">
+        <button id="boticon">Chat AI </button>
+   </div>
+    </div>
+    <div id="chatbot">
+        <h2 id="X">X</h2>
+        <h1 id="chatheading">Hey Chat</h1>
+        <div id="qapair">
+        </div>
+        <div id="textbox">
+            <div>
+                <input type="radio" name="chattype" value="doc">Document
+                <input type="radio" name="chattype" value="news">Search
+            </div>
+            <input type="text" placeholder="Chat..." id="inp" autocomplete="off">
+            <button id="send" onclick="sendchat()">>>></button>
+        </div>
+    </div>
+
+    <script>
+        function fetchnew(){
+            fetch("/update_chart")
+                .then(res=>res.json())
+                .then(data=>{
+                    Plotly,expandTraces("stock_hourly_price",{
+                        x:[data.x[0],data.x[1],data.x[2]],
+                        open:data.open[0],
+                        high:data.high[0],
+                        low:data.low[0],
+                        close:data.close[0],
+                        y:[data.y[0],data.y[1]]
+                    }
+                    ,{displayModeBar:false})
+                });
+        }
+        let icon=document.querySelector("#boticon")
+
+        let bottompage=document.querySelector(".bottom_page")
+
+        let bot=document.querySelector("#chatbot")
+
+        icon.addEventListener("click",()=>{       
+            bottompage.style.opacity=0.2
+            chatbot.style.display="flex"
+        })
+
+        let cancel=document.querySelector("#X")
+
+        cancel.addEventListener("click",()=>{
+            bottompage.style.opacity=1
+            chatbot.style.display="none"
+        })
+        let inputfield=document.getElementById("inp")
+        let buton=document.getElementById("send")
+        buton.disabled=true;
+        buton.style.backgroundColor="grey"
+        inputfield.addEventListener('input',()=>{
+            if(inputfield.value.trim() !== ""){
+                buton.style.backgroundColor="rgb(34, 191, 26)"
+                buton.disabled=false
+            } else{
+                buton.style.backgroundColor="grey"
+                buton.disabled=true
+            }
+        })
+
+        function sendchat(){
+            let container=document.getElementById("qapair")
+            const qus=document.createElement("div")
+            const ans=document.createElement("div")
+            let text=inputfield.value
+            qus.className="question"
+            qus.innerHTML=text
+            container.appendChild(qus)
+            inputfield.value=""
+            fetch('/get_response',{
+                method:"POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body:JSON.stringify({text})
+            }).then(res=>res.json()).then(data=>{
+                ans.innerHTML=data.response
+                ans.className="response"
+                container.appendChild(ans)
+            })
+        }
+        setInterval(fetchnew,60*60*1000)
+    </script>
+</body>
+</html>