Upload 21 files

app.py

@@ -0,0 +1,48 @@
+from config import Flask,pipeline_dict,Response,convHandler
+from application.chat_inference import ChatInference
+from flask import render_template,request
+
+app = Flask(__name__, template_folder='application/templates', static_folder='application/static')
+
+chat_inference = ChatInference()
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/completions',methods=['POST'])
+def completeions():
+    data = request.json
+    models = pipeline_dict['api']['models']
+    if(data.get('model',None) not in models):
+        return "Model Not Found", 404
+    model_info = models[data['model']]
+    data.update(
+        {
+            "base_url": model_info['api_url'],
+            "type": model_info['type']
+        }
+    )
+    return chat_inference.chat(data=data,handle_stream=pipeline_dict['handle_stream'],user=request.remote_addr)
+    
+@app.route('/convs')
+def get_conv():
+    print(request.remote_addr)
+    return convHandler.get_conv(request.remote_addr)
+
+@app.route('/create', methods=['POST'])
+def create_conv():
+    sysPrompt = request.json.get('system_prompt', '')
+    return convHandler.create_conv(ip=request.remote_addr,sysPrompt=sysPrompt)
+@app.route('/fetch', methods=['POST'])
+def fetch():
+    convId = request.json.get('convId')
+    return convHandler.fetch_conv(convId=convId,ip=request.remote_addr)
+@app.route('/update')
+def update():
+    return convHandler.update_conv(request.remote_addr, request.json)
+@app.route('/models')
+def models():
+    return list(pipeline_dict['api']['models'].keys())
+
+app.run(host='0.0.0.0',port=5000,debug=False)

application/chat_inference.py

@@ -0,0 +1,63 @@
+from application.utils.chat_completion_api import ChatCompletionAPI
+from config import Response,pipeline_dict,convs_dict
+import os
+class ChatInference:
+    def __init__(self):
+        self.chatCompletionAPI = ChatCompletionAPI()
+
+    def validate(self,data,user):
+        try:
+            pipeline = pipeline_dict['api']['models']
+            model = data['model']
+            self.headers = pipeline[model]['headers']
+            self.updateHeaders = {}
+            for header in self.headers:
+                if(header=="config"):
+                    for configHeader in self.headers[header]:
+                        if(configHeader=="Authorization"):
+                            auth = self.headers[header][configHeader].split(' ')
+                            self.updateHeaders[configHeader] = f"{auth[0]} {eval(auth[1])}"
+                        elif(configHeader=="comment"):
+                            pass
+                        else:
+                            self.updateHeaders[configHeader] = f"{eval(self.headers[header][configHeader])}"
+                else:
+                    self.updateHeaders[header] = self.headers[header]
+            prompt = data['prompt']
+            max_tokens = data.get('max_token', 1024)
+            temperature = max(0, min(data.get('temperature', 0.7), 2))
+            top_p = max(0.1, min(data.get('top_p', 0.9), 1))
+            system = data.get('system_prompt','')
+            convId = data['convId']
+            
+            if(len(convs_dict[user][convId]['messages'])==1):
+                #convs_dict[user][convId]['messages'].append({"role":"system", "content": system})
+                convs_dict[user]['metadata'].insert(0,{"convId": convId, "title": prompt[:23]})
+                convs_dict[user][convId]['title'] = prompt[:30]
+            if(pipeline[model]['type'] == 'image-text-to-text'):
+                convs_dict[user][convId]['messages'].append({"role": "user", "content": [{"type":"text","text":prompt}]})
+            else:
+                convs_dict[user][convId]['messages'].append({"role":"user","content":prompt})
+            transformed = {
+                "model": model,
+                "prompt": prompt,
+                "messages": convs_dict[user][convId]['messages'],
+                "max_tokens": max_tokens,
+                "temperature": temperature,
+                "top_p": top_p,
+                "stream": True
+            }
+            data.update(transformed)
+            return data
+        except KeyError:
+            return 400
+
+    def chat(self,data,handle_stream,user):
+        data = self.validate(data=data,user=user)
+        if(data==400):
+            return "Required Parameters are Missing!", 400
+        
+        return self.chatCompletionAPI.make_request(json=data,url=data['base_url'],handle_stream=handle_stream,messages=data['messages'], headers=self.updateHeaders)
+
+        
+

application/static/css/style.css

@@ -0,0 +1,317 @@
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent; 
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgb(43, 43, 43);
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgb(119, 119, 119);
+}
+html,body{
+    padding: 0;
+    margin: 0;
+    background-color: rgb(2,2,8);
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    scrollbar-width: thin; 
+    scrollbar-color: rgb(41, 41, 41) transparent;
+    font-family: 'Inter';
+
+}
+nav{
+    position: fixed;
+    width: 100vw;
+    height: 8vh;
+    z-index: 100;
+    display: flex;
+}
+.hamburger{
+    display: flex;
+    flex-direction: column;
+    gap: 1.5vh;
+    width: 20vh;
+    color: white;
+    margin: 1vw;
+    cursor: pointer;
+    position: absolute;
+    z-index: 101;
+}
+.line1{
+    background-color: rgb(122, 122, 122);
+    width: 7vh;
+    height: 0.5vh;
+}
+.line2{
+    background-color: rgb(104, 104, 104);
+    width: 4vh;
+    height: 0.5vh;
+}
+
+.hamburger:hover .line1{
+    transform: translateX(-30px);
+    transition: transform 1s ease;
+}
+.hamburger:hover .line2{
+    transform: translateX(30px);
+    transition: transform 1s ease;
+}
+.menu{
+    height: 100vh;
+    width: 0px;
+    background-color: rgba(20, 20, 20,0.5);
+    border-radius: 10px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+.newChat{
+    margin-top: 8vh;
+    margin-left: 1vw;
+    background: linear-gradient(to right,rgb(206, 206, 206), rgb(87, 87, 87));
+    background-clip: text;
+    color: transparent;
+    font-size: large;
+    cursor: pointer;
+    font-weight: 400;
+    position: relative;
+    font-size: large;
+}
+.newChat:hover{
+    transform: scale(0.95);
+    transition: transform 0.7s ease;
+}
+.prevChatsCont{
+    color: rgb(172, 171, 171);
+    margin-left: 1vw;
+    font-weight: 300;
+    display: flex;
+    flex-direction: column;
+    gap: 1vh;
+    position: relative;
+    font-size: medium;
+    
+}
+.prevChat{
+    min-height: 5vh;
+    cursor: pointer;
+    width: 90%;
+    display: flex;
+    align-items: center;
+    padding-left: 5%;
+    border-radius: 10px;
+    overflow: hidden;
+    padding-top: 1%;
+    padding-bottom: 1%;
+    position: relative;
+}
+.prevChat:hover{
+    background-color: rgba(70,70, 70,1);
+    transform: translateY(5px);
+    transition: transform 0.8s ease;
+}
+.chatsTxt{
+    color: #fdffdf;
+    margin-left: 1vw;
+    font-size: 14px;
+    margin-top: 4vh;
+    margin-bottom: 3vh;
+    z-index: 100;
+    overflow: hidden;
+    min-height: 5vh;
+    display: flex;
+    align-items: center;
+
+}
+
+.container {
+    width: 99.5%;
+    max-width: 99.5%;
+    height: 91.5vh;
+    position: absolute;
+    z-index: 50;
+    top: 8vh;
+    display: flex;
+    flex-direction: column; 
+    justify-content: flex-end; 
+    z-index: 1;
+}
+
+.inputs {
+    width: 70%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background-color: rgba(51, 51, 51, 0.4);
+    padding: 10px;
+    border-top-right-radius: 50px;
+    border-bottom-left-radius: 20px;
+    border-top-left-radius: 20px;
+    border-bottom-right-radius: 50px;
+    font-size: large;
+    position: relative; 
+    margin-top: auto; 
+    align-self: center;
+    margin-bottom: 1.5vh;
+}
+
+.textBox{
+    width: 90%;
+    background: none;
+    outline: none;
+    border: none;
+    color: rgb(161, 161, 161);
+    padding: 7px;
+}
+.sendBtn{
+    background-color: white;
+    border: none;
+    color: black;
+    font-size: x-large;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 6vh;
+    height: 6vh;
+}
+.messages {
+    overflow-y: auto; 
+    color: white;
+    padding: 10px;
+    display: flex;
+    flex-direction: column; 
+    position: relative;
+}
+.user{
+    margin-left: auto;
+    max-width: 60%;
+    background-color: rgba(51, 51, 51, 0.4);
+    padding: 0.5vh 1.5vh 0.5vh 1.5vh;
+    text-align: left;
+    font-weight: 300;
+    border-radius: 10px;
+    box-shadow: 3px 3px rgb(36, 36, 36) inset;
+    font-size: medium;
+    line-height: 130%;
+}
+.user p{
+    color: #c5c5c5;
+}
+.ai{
+    text-align: left;
+    width: 70%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2vh;
+}
+.ai p {
+    opacity: 0.95;
+    font-size: medium; 
+    font-weight: 300; 
+    line-height: 1.6;
+    color: #cfcfcf; 
+}
+.user p, .ai p{
+    padding:0;
+}
+.subHeading,.heading{
+    padding: 1vh;
+    border-radius: 10px;
+    display: inline-block;
+    margin-bottom: 2vh;
+    margin-top: 2vh;
+}
+.subHeading{
+    background-color: rgba(51, 51, 51, 0.7);
+}
+.heading{
+    background-color: rgba(119, 16, 238, 0.55);
+    box-shadow: 6px 6px rgb(32, 32, 32) ;
+
+}
+code{
+    border-radius: 15px;
+}
+.models{
+    position: relative;
+    margin: auto;
+    padding: 10px   ;
+    outline: none;
+    background-color: rgb(43, 43, 43);
+    color: rgb(177, 177, 177);
+    border: none;
+    border-radius: 10px;
+}
+.models:hover{
+    background-color: #383838;
+}
+.models option{
+    background-color: rgb(34, 34, 34);
+    color: #afafaf;
+    padding: 10px;
+}
+.alert{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: 320px;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    color: #d8d8d8;
+    background-color: #222222;
+    box-shadow: 6px 6px rgb(41, 41, 41) ;
+    justify-content: center;
+    z-index: 100;
+}
+.alert p{
+    float: left;
+    padding: 10px;
+    font-family: 'Inter';
+    font-weight: 300;
+    font-size: 15px;
+    color: #cfcfcf; 
+    opacity: 0.9;
+}
+.closeAlert{
+    margin-left: auto;
+    margin-right: 10px;
+    margin-top: 10px;
+    background-color: rgb(247, 102, 102);
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 10px;
+    color: #ffffff;
+}
+.note{
+    text-align: center;
+    background-color: rgba(119, 16, 238, 0.55);
+    box-shadow: 6px 6px rgb(32, 32, 32) ;
+    margin: auto;
+    width: 70px;
+}
+
+@media screen and (max-width: 780px){
+    .menu{
+    background-color: rgba(20, 20, 20);
+    }
+    .inputs{
+        width: 85%;
+    }
+}
+
+/* TO do .....*/
+.textCustomization{
+    display: none;
+}

application/static/js/components/chat.js

@@ -0,0 +1,43 @@
+import requests from "./request.js";
+
+class Chat{
+    constructor(uiManager){
+        this.uiManager = uiManager;
+    }
+    async chat(){
+        let payload = {
+            "model": this.uiManager.initializer.model,
+            "prompt": this.uiManager.userP.innerText.trim(),
+            "convId": this.uiManager.initializer.convId,
+            "system": this.uiManager.initializer.systemPrompt,
+            "temperature": 0.7,
+            "top_p": 0.9
+        };
+        try {
+            if(this.uiManager.initializer.convId==null){
+                await this.uiManager.initializer.createConv();
+                payload["convId"] = this.uiManager.initializer.convId;
+            }
+            this.uiManager.textBox.value='';
+            this.uiManager.sendBtn.disabled = true;
+            const response = await requests.request('POST','/completions',{"Content-Type": "application/json"},JSON.stringify(payload),true);
+            for await (const chunk of response){
+                this.uiManager.aiP.innerHTML+=chunk;
+                this.uiManager.renderSymbols.renderAll(this.uiManager.aiP)
+            };
+        } catch (error) {
+            this.uiManager.sendBtn.disabled = false;
+            this.uiManager.aiP.innerHTML+= `<span class="error" style="color: red;">${error}</span>`;
+            return
+        }
+        this.uiManager.renderSymbols.renderCode(this.uiManager.aiP);
+        if(this.uiManager.initializer.convTitle==null){
+            this.uiManager.initializer.convTitle = this.uiManager.userP.innerText.substring(0,23);
+            this.uiManager.addChat();
+        }
+        this.uiManager.sendBtn.disabled = false;
+
+    }
+}
+
+export default Chat

application/static/js/components/initialize.js

@@ -0,0 +1,112 @@
+import requests from "./request.js";
+class Initialize{
+    constructor(uiManager){
+        this.convId;
+        this.convTitle;
+        this.uiManager = uiManager;
+        this.systemPrompt = `your response syntax should be: ***for heading*** \n ** for sub heading **`;
+        this.model = null;
+    }
+
+    async initialize(model=null){
+        this.convTitle=null;
+        this.convId=null;
+        this.uiManager.messagesDiv.innerHTML = '';
+        this.uiManager.prevChatsCont.innerHTML = '';
+        await this.fetchConvs();
+        document.querySelectorAll('.prevChat').forEach((elem)=>{
+            elem.addEventListener('click', ()=>{
+                this.reInitialize(elem.id)
+            })
+        })
+        if(model!=null){
+            this.model = model;
+        } else{
+            await this.fetchModels()
+        }
+    }
+
+    async reInitialize(id){
+        this.convTitle=null;
+        this.convId=null;
+        this.uiManager.messagesDiv.innerHTML = '';
+        await this.fetchConv(id);
+    }
+
+    async fetchConv(id){
+        try {
+            const response = await requests.request('POST','/fetch',{"Content-Type": "application/json"},JSON.stringify({"convId": id}),false);
+            if(!response.ok){
+                alert('error while fetching conversations')
+                return
+            }
+            let data = await response.json();
+            this.convTitle = data['title']
+            data = data['messages']
+            for(let i=0;i<data.length;i++){
+                const dict = data[i];
+                if(dict['role']=='user'){
+                    this.uiManager.appendUserMsg(dict['content'])
+                }
+                else if(dict['role']=='assistant'){
+                    this.uiManager.appendAiMsg(dict['content']);
+                    this.uiManager.renderSymbols.renderAll(this.uiManager.aiP);
+                }
+            }
+        } catch (error) {
+            alert(`an error occured ${error}`)
+            console.log(error)
+        }
+    }
+    async fetchConvs(){
+        try {
+            const response = await requests.request('GET','/convs',{"Content-Type": "application/json"},null,false);
+            if(!response.ok){
+                alert('error while fetching conversations')
+                return
+            }
+            const data = await response.json();
+            for(let i=0;i<data.length;i++){
+                const prevChat = document.createElement('div');
+                const dict = data[i];
+                prevChat.id = dict['convId'];
+                prevChat.className = 'prevChat';
+                prevChat.innerText = dict['title'];
+                this.uiManager.prevChatsCont.appendChild(prevChat)
+
+            }
+        } catch (error) {
+            alert(`an error ocuured ${error}`)
+        }
+    }
+    async createConv(){
+        const response = await requests.request('POST', '/create', {"Content-Type": "application/json"},JSON.stringify({"system_prompt": this.systemPrompt}),false)
+        if(!response.ok){
+            alert('error while creating new Conversation')
+            return
+        }
+        const data = await response.json()
+        this.convId = data['convId']
+    }
+    async fetchModels(){
+        const response = await requests.request('GET', '/models', {"Content-Type": "application/json"},null,false)
+        if(!response.ok){
+            alert('error while fetching models')
+            return
+        }
+        const data = await response.json();
+        this.model = data[0];
+        this.uiManager.models.innerHTML = '';
+        for(let i=0; i<data.length;i++){
+            const opt = document.createElement('option')
+            opt.innerText = data[i];
+            this.uiManager.models.appendChild(opt)
+        }
+        this.uiManager.models.addEventListener('change', (e)=>{
+            const selected = e.target.value;
+            this.initialize(selected)
+        })
+
+    }
+}
+export default Initialize

application/static/js/components/navbar.js

@@ -0,0 +1,68 @@
+class Navbar {
+    constructor(UIManager) {
+        this.uiManager = UIManager;
+        this.menu = this.uiManager.menu;
+        this.hamburger = this.uiManager.hamburger;
+        this.container = this.uiManager.container;
+        this.state = true; // true = open, false = closed
+        this.menuWidth = 0;
+        this.containerWidth = this.container.clientWidth;
+        this.NAV_AREA_LARGE = 20; // % of window width
+        this.NAV_AREA_MEDIUM = 25; // % of window width
+        this.NAV_AREA_SMALL = 60; // % of window width
+        this.ANIMATION_STEP = 5; // pixels per frame
+    }
+
+    calculateNavArea() {
+        if (window.innerWidth > 785) {
+            return window.innerWidth < 1100 
+                ? window.innerWidth * (this.NAV_AREA_MEDIUM / 100)
+                : window.innerWidth * (this.NAV_AREA_LARGE / 100);
+        }
+        return window.innerWidth * (this.NAV_AREA_SMALL / 100);
+    }
+
+    toggleState() {
+        if (this.state) {
+            this.nav.close();
+        } else {
+            this.nav.open();
+        }
+        this.state = !this.state;
+    }
+
+    animateNav(action) {
+        if (action === 'open' && this.menuWidth < this.navArea) {
+            this.menuWidth += this.ANIMATION_STEP;
+        } else if (action === 'close' && this.menuWidth > 0) {
+            this.menuWidth -= this.ANIMATION_STEP;
+        } else {
+            return; // Stop animation
+        }
+
+        this.menu.style.width = `${this.menuWidth}px`;
+        if(window.innerWidth>775){
+            this.container.style.width = `${this.containerWidth - this.menuWidth}px`;
+            this.container.style.left = `${this.menuWidth}px`;
+        }
+        requestAnimationFrame(() => this.animateNav(action));
+    }
+
+    run() {
+        this.navArea = this.calculateNavArea();
+        this.nav = {
+            open: () => this.animateNav('open'),
+            close: () => this.animateNav('close'),
+        };
+
+        if (window.innerWidth <= 785) {
+            this.state = false;
+        } else {
+            this.nav.open();
+        }
+
+        this.hamburger.addEventListener('click', () => this.toggleState());
+    }
+}
+
+export default Navbar

application/static/js/components/renderSymbols.js

@@ -0,0 +1,43 @@
+class RenderSymbols{
+    constructor(){
+
+    }
+    renderAll(elem){
+        this.renderText(elem);
+        this.renderCode(elem);
+        this.renderMath(elem)
+    }
+    renderMath(elem) {
+        let content = elem.innerHTML;
+        MathJax.typesetPromise([elem])
+            .then(() => {
+                
+            })
+            .catch((err) => {
+
+            });
+    }
+    renderText(elem){
+        elem.innerHTML = elem.innerHTML.replace(/<br\s*\/?>/g, '\n');
+        elem.innerHTML = elem.innerHTML.replace(/\*\*\*(.*?)\*\*\*/g, '<span class="heading">$1</span>');
+        elem.innerHTML = elem.innerHTML.replace(/\*\*(.*?)\*\*/g, '<span class="subHeading">$1</span>');
+        elem.innerHTML = elem.innerHTML.replace(/\n/g, '<br>');
+    }
+    renderCode(element) {
+        let content = element.innerHTML;        
+        if (content.includes("```") && content.split("```").length >= 3) {
+            content = content.replace(/```(\w*)<br>([\s\S]*?)```/g, (match, language, code) => {
+                code = code.replace(/<br>/g, '\n').trim();
+                language = language.trim() || 'text';
+                return `<pre class="code-block"><code class="language-${language}">${code}</code></pre>`;
+            });
+            
+            element.innerHTML = content;
+            element.querySelectorAll('code:not(.hljs)').forEach(block => {
+                hljs.highlightElement(block);
+            });
+        }
+    }
+  
+}
+export default RenderSymbols

application/static/js/components/request.js

@@ -0,0 +1,38 @@
+class Request{
+    constructor(){
+
+    }
+    async request(method,url,headers={},payload=null,stream=false){
+        try {
+            const response = await fetch(url,{
+                method: method,
+                headers: headers,
+                body: payload
+            })
+            if(stream && response.ok){
+                return this.handleStream(response)
+            } else{
+                return response
+            }
+        } catch (error) {
+            return error
+        }
+        
+    }
+
+    async *handleStream(response){
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        while(true){
+            const {done,value} = await reader.read()
+            if(done){
+                break
+            }
+            const chunk = decoder.decode(value,{stream:true})
+            yield chunk
+        }
+    }
+}
+
+const requests = new Request()
+export default requests

application/static/js/components/uiManager.js

@@ -0,0 +1,98 @@
+import Initialize from "./initialize.js";
+import Chat from "./chat.js";
+import RenderSymbols from "./renderSymbols.js";
+class UIManager{
+    constructor(){
+        this.initializer = new Initialize(this);
+        this.chat = new Chat(this);
+        this.renderSymbols = new RenderSymbols();
+        this.menu = document.getElementById('menu');
+        this.hamburger = document.getElementById('hamburger');
+        this.messagesDiv = document.getElementById('messages');
+        this.container = document.getElementById('container')
+        this.prevChatsCont = document.getElementById('prevChatsCont'); 
+        this.textBox = document.getElementById('textBox');
+        this.sendBtn = document.getElementById('sendBtn');
+        this.newChat = document.getElementById('newChat');
+        this.models = document.getElementById('models');
+        this.initialized = false;
+        this.aiDiv;
+        this.userDiv;
+        this.aiP;
+        this.userP;
+    }
+    async run(){
+        await this.initializer.initialize();
+        this.handleTextBoxHeight();
+        this.events();
+    }
+    events(){
+        this.sendBtn.addEventListener('click',()=>{
+            this.send();
+        })
+        window.addEventListener('keydown',(e)=>{
+            if(e.key=='Enter' && !this.sendBtn.disabled){
+                this.send();
+            }
+        })
+        this.newChat.addEventListener('click', async ()=>{
+            await this.initializer.initialize();
+        })
+        document.getElementById('closeAlert').onclick = ()=>{
+            document.getElementById('alert').style.display = 'none'
+        }
+    }
+    async send(){
+        this.appendUserMsg();
+        this.appendAiMsg();
+        await this.chat.chat();
+    }
+
+    appendUserMsg(msg=false){
+        this.userDiv = document.createElement('div');
+        this.userDiv.className = 'user';
+        this.userP = document.createElement('p');
+        if(msg){
+            this.userP.innerText = msg;
+        } else{
+            this.userP.innerText = this.textBox.value;
+        }
+        this.userDiv.appendChild(this.userP);
+        this.messagesDiv.appendChild(this.userDiv);
+    }
+    appendAiMsg(msg=false){
+        this.aiDiv = document.createElement('div');
+        this.aiDiv.className = 'ai';
+        this.aiP = document.createElement('p');
+        if(msg){
+            this.aiP.innerText=msg;
+        }
+        this.aiDiv.appendChild(this.aiP);
+        this.messagesDiv.appendChild(this.aiDiv);
+    }
+    handleTextBoxHeight() {
+        this.textBox.oninput = () => {
+            //this.textBox.value = this.textBox.value.trim();     
+            this.textBox.style.height = 'auto';
+            if (this.textBox.scrollHeight <= 150) {
+                if(this.textBox.scrollHeight>60){
+                    this.textBox.style.height = `${this.textBox.scrollHeight}px`;
+                }
+            } else {
+                this.textBox.style.height = '150px';
+            }
+        };
+    }
+    addChat(){
+        const prevChat = document.createElement('div');
+        prevChat.innerText = this.initializer.convTitle;
+        prevChat.className = 'prevChat';
+        prevChat.id = this.initializer.convId;
+        this.prevChatsCont.prepend(prevChat);
+        prevChat.style.backgroundColor = 'rgb(53, 53, 53)';
+        prevChat.addEventListener('click', ()=>{
+            this.initializer.reInitialize(prevChat.id);
+        })
+    }
+}
+export default UIManager

application/static/js/script.js

@@ -0,0 +1,14 @@
+import UIManager from "./components/uiManager.js";
+import Navbar from "./components/navbar.js";
+class App{
+    constructor(){
+        this.uiManager = new UIManager()
+        this.navbar = new Navbar(this.uiManager);
+    }
+    run(){
+        this.uiManager.run();
+        this.navbar.run();
+    }
+}
+const app = new App()
+app.run();

application/templates/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <title>Chat Completion Demo</title>
+</head>
+<body>
+    <nav>
+        <select name="" id="models" class="models">
+        </select>
+        <div class="hamburger" id="hamburger">
+            <div class="line1"></div>
+            <div class="line2"></div>
+        </div>
+        <div class="menu" id="menu">
+            <div class="newChat" id="newChat">+ New Chat</div>
+            <p class="chatsTxt">chats</p>
+            <div class="prevChatsCont" id="prevChatsCont">
+            </div>
+        </div>
+
+    </nav>
+    <div class="container" id="container">
+        <div class="messages" id="messages">
+        </div>
+        <div class="inputs">
+            <textarea name="" id="textBox" class="textBox" placeholder="Enter your message..."></textarea>
+            <button id="sendBtn" class="sendBtn"><i class="fa-solid fa-arrow-up"></i></button>
+        </div>
+    </div>
+    <div class="alert" id="alert">
+        <div class="closeAlert" id="closeAlert">X</div>
+       <p class="note">Note</p>
+        <p>You can easily use your own API provider to run this application; just update the pipeline.json file</p>
+        <p>The file/image attachment feature for the vision model has not been implemented yet.</p>
+    </div>
+    <div class="textCustomization">
+        <div class="colors"></div>
+        <div class="fontSize"></div>
+        <div class="background"></div>
+    </div>
+<script src="{{ url_for('static', filename='js/script.js') }}" type="module"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+</body>
+</html>

application/utils/chat_completion_api.py

@@ -0,0 +1,50 @@
+import requests,json
+from config import Response
+class ChatCompletionAPI():
+    def __init__(self):
+        pass
+    def make_request(
+        self,
+        method='POST',
+        stream=True,
+        handle_stream=False,
+        json=None,
+        url=None,
+        messages=None,
+        headers=None ):
+        self.headers = headers
+        self.messages = messages
+        response = requests.request(
+            url=url,
+            json=json,
+            stream=stream,
+            headers=self.headers,
+            method=method)
+        self.ai = ''
+        if(response.status_code!=200):
+            return f'an error occured\napi status_code: {response.status_code}\napi response: {response.text}',500
+        if(handle_stream):
+            return self.handle_stream(response=response)
+        else:
+            self.ai = response.text
+            self.messages.append({"role":"assistant","content":self.ai})    
+            return ai
+
+    def handle_stream(self,response):
+        def generator():
+            for data in response.iter_lines():
+                data = data.decode()
+                data = data[6:]
+
+                try:
+                    data = json.loads(data)
+                    chunk = data['choices'][0]['delta']['content']
+                    self.ai+=chunk
+                    yield chunk
+                except json.JSONDecodeError:
+                    pass
+                except Exception as e:
+                    yield str(data)
+                    return
+            self.messages.append({"role":"assistant","content":self.ai})
+        return Response(generator())

application/utils/convs_handler.py

@@ -0,0 +1,26 @@
+import uuid
+class ConvHandler:
+    def __init__(self,convs_dict):
+        self.convs_dict = convs_dict;
+
+    def get_conv(self,ip):
+        if(ip not in self.convs_dict):
+            self.convs_dict[ip] = {"metadata": []}
+        return self.convs_dict[ip]['metadata']
+
+    def create_conv(self,ip,sysPrompt):
+        user = self.convs_dict.get(ip,False)
+        if(user==False):
+            return f"user not found. {self.convs_dict}", 404
+        convId = str(uuid.uuid4())
+        user[convId] = {
+            "messages": [{"role":"system", "content": sysPrompt}],
+            "title": "New Chat"
+        }
+        return {"convId": convId}
+        
+    def fetch_conv(self,ip,convId):
+        user = self.convs_dict.get(ip,False)
+        if(user==False):
+            return f"user not found. {self.convs_dict}", 404
+        return user[convId] 

config.py

@@ -0,0 +1,24 @@
+from flask import Flask,request,render_template,request,Response,jsonify
+from application.utils.convs_handler import ConvHandler
+import json
+
+pipeline_path = './pipeline.json'
+
+with open(pipeline_path, 'r') as file:
+    pipeline_dict = json.load(file)
+
+convs_dict = {
+    #format---> ip:{ 
+    #               convId:{
+    #                   messages = [],
+    #               }
+    #               ...
+    #               metadata (a list containing all convId and title in dict format) = [
+    #                       {
+    #                           "convID",
+    #                           "convTitle"
+    #                       }...]
+    #                  
+}
+
+convHandler = ConvHandler(convs_dict=convs_dict)

pipeline.json

@@ -0,0 +1,100 @@
+{
+    "api": {
+        "models": {
+            "Qwen2.5-Coder-32B-Instruct": {
+                "type": "Text Generation",
+                "api_url": "https://api-inference.huggingface.co/models/Qwen/Qwen2.5-Coder-32B-Instruct/v1/chat/completions",
+                "headers": {
+                    "Content-Type": "application/json",
+                    "x-use-cache": "false",
+                    "config": {
+                        "comment": "This section runs Python code. It retrieves the API key from your environment using 'os'. You can use this for Authorization headers or replace it with another type of headers, like 'ApiKey'.",
+                        "Authorization": "Bearer os.environ.get('auth')"
+                }
+                }
+            },
+
+            "QwQ-32B-Preview": {
+                "type": "Text Generation",
+                "api_url": "https://api-inference.huggingface.co/models/Qwen/QwQ-32B-Preview/v1/chat/completions",
+                "headers": {
+                    "Content-Type": "application/json",
+                    "x-use-cache": "false",
+                    "config": {
+                        "comment": "This section runs Python code. It retrieves the API key from your environment using 'os'. You can use this for Authorization headers or replace it with another type of headers, like 'ApiKey'.",
+                        "Authorization": "Bearer os.environ.get('auth')"
+                }
+                }
+            },
+
+            "SmallThinker-3B-Preview": {
+                "type": "Text Generation",
+                "api_url": "https://api-inference.huggingface.co/models/PowerInfer/SmallThinker-3B-Preview/v1/chat/completions",
+                "headers": {
+                    "Content-Type": "application/json",
+                    "x-use-cache": "false",
+                    "config": {
+                        "comment": "This section runs Python code. It retrieves the API key from your environment using 'os'. You can use this for Authorization headers or replace it with another type of headers, like 'ApiKey'.",
+                        "Authorization": "Bearer os.environ.get('auth')"
+                }
+                }
+            },
+
+            "Mistral-Nemo-Instruct-2407": {
+                "type": "Text Generation",
+                "api_url": "https://api-inference.huggingface.co/models/mistralai/Mistral-Nemo-Instruct-2407/v1/chat/completions",
+                "headers": {
+                    "Content-Type": "application/json",
+                    "x-use-cache": "false",
+                    "config": {
+                        "comment": "This section runs Python code. It retrieves the API key from your environment using 'os'. You can use this for Authorization headers or replace it with another type of headers, like 'ApiKey'.",
+                        "Authorization": "Bearer os.environ.get('auth')"
+                }
+                }
+            },
+
+            "Phi-3.5-mini-instruct": {
+                "type": "Text Generation",
+                "api_url": "https://api-inference.huggingface.co/models/microsoft/Phi-3.5-mini-instruct/v1/chat/completions",
+                "headers": {
+                    "Content-Type": "application/json",
+                    "x-use-cache": "false",
+                    "config": {
+                        "comment": "This section runs Python code. It retrieves the API key from your environment using 'os'. You can use this for Authorization headers or replace it with another type of headers, like 'ApiKey'.",
+                        "Authorization": "Bearer os.environ.get('auth')"
+                }
+                }
+            },
+
+            "Llama-3.2-11B-Vision-Instruct": {
+                "type": "image-text-to-text",
+                "api_url": "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-11B-Vision-Instruct/v1/chat/completions",
+                "headers": {
+                    "Content-Type": "application/json",
+                    "x-use-cache": "false",
+                    "config": {
+                        "comment": "This section runs Python code. It retrieves the API key from your environment using 'os'. You can use this for Authorization headers or replace it with another type of headers, like 'ApiKey'.",
+                        "Authorization": "Bearer os.environ.get('auth')"
+                }
+                }
+            },
+
+            
+            "Meta-Llama-3-8B-Instruct": {
+                "type": "Text Generation",
+                "api_url": "https://api-inference.huggingface.co/models/meta-llama/Meta-Llama-3-8B-Instruct/v1/chat/completions",
+                "headers": {
+                    "Content-Type": "application/json",
+                    "x-use-cache": "false",
+                    "config": {
+                        "comment": "This section runs Python code. It retrieves the API key from your environment using 'os'. You can use this for Authorization headers or replace it with another type of headers, like 'ApiKey'.",
+                        "Authorization": "Bearer os.environ.get('auth')"
+                }
+                }
+            }
+
+
+        }
+    },
+    "handle_stream": true
+}

requirements.txt

@@ -0,0 +1,2 @@
+Flask
+requests