IMGIITRoorkee · mann2096 · Jun 30, 2025 · Jul 17, 2025 · Jul 17, 2025 · Jul 23, 2025
diff --git a/Atharv/Chat app/.vscode/settings.json b/Atharv/Chat app/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Atharv/Chat app/index.html b/Atharv/Chat app/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Chat App</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="left-section">
+    <h3>Enter your API key here</h3>
+    <input type="text" id="api-key" placeholder="API key..">
+    <h3>Select the model that you want to use</h3>
+    <select id="drop-down">
+      <option value="google/gemma-3n-e2b-it:free">gemma</option>
+      <option value="cognitivecomputations/dolphin-mistral-24b-venice-edition:free">venice</option>
+      <option value="moonshotai/kimi-k2:free">kimi 72b</option>
+      <option value="deepseek/deepseek-r1-0528-qwen3-8b:free">deepseek</option>
+      <option value="deepseek/deepseek-r1-0528:free">deepseek R1</option>
+    </select>
+    <h3>Chat History</h3>
+    <ul id="history-list"></ul>
+  </div>
+  <div id="right-section">
+    <h1 id="heading">ChatGPT</h1>
+    <button id="new-chat-btn">New Chat</button>
+    <div id="app">
+      <div id="chat-box"></div>
+      <div id="input-area">
+        <input type="text" id="user-input" placeholder="Type a message...">
+        <button id="enter-btn">
+          <img src="https://img.icons8.com/ios-filled/50/circled-right-2.png" alt="Enter" />
+        </button>
+      </div>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Atharv/Chat app/script.js b/Atharv/Chat app/script.js
@@ -0,0 +1,155 @@
+const input=document.querySelector("#user-input");
+const enter=document.querySelector("#enter-btn");
+const key=document.querySelector("#api-key");
+const modelname=document.querySelector("#drop-down");
+const chatBox=document.querySelector("#chat-box");
+const newChatBtn=document.querySelector("#new-chat-btn"); 
+const historyList=document.querySelector("#history-list");
+
+let allThreads=JSON.parse(localStorage.getItem("chatThreads"))||[];
+let currentThreadIndex=allThreads.length;
+let currentChat=[];
+let decoder=new TextDecoder("utf-8");
+
+window.addEventListener("load",()=>{
+  updateHistory();
+  if(currentThreadIndex<allThreads.length) {
+    currentChat=[...allThreads[currentThreadIndex]];
+    renderChat(currentChat);
+  }
+});
+
+enter.addEventListener("click",()=>{
+  if(!key.value) {
+    alert("Please enter the API key first");
+    return;
+  }
+  const userMessage=input.value.trim();
+  if(userMessage==="")return;
+  input.value="";
+  addMessage("You",userMessage);
+  currentChat.push({sender:"You",message:userMessage});
+  dataHandling(userMessage);
+});
+
+newChatBtn.addEventListener("click",()=>{
+  currentChat=[];
+  currentThreadIndex=allThreads.length;
+  chatBox.innerHTML="";
+  chatBox.scrollTop=0;
+});
+
+async function dataHandling(message){
+  const model=modelname.value;
+  const apiKey=key.value;
+
+  const aiMsgDiv=document.createElement("div");
+  aiMsgDiv.classList.add("message","ai-message");
+  const aiMsgText=document.createElement("p");
+  aiMsgDiv.appendChild(aiMsgText);
+  chatBox.appendChild(aiMsgDiv);
+  chatBox.scrollTop=chatBox.scrollHeight;
+  try{
+    const response=await fetch("https://openrouter.ai/api/v1/chat/completions", {
+      method:"POST",
+      headers:{
+        "Content-Type":"application/json",
+        "Authorization":`Bearer ${apiKey}`,
+        "X-Title":"LLM Chat App"
+      },
+      body:JSON.stringify({
+        model:model,
+        messages:[{role:"user",content:message}],
+        stream:true
+      })
+    });
+    if(!response.ok){
+      const errorText=`${response.status} ${response.statusText}`;
+      addMessage("AI", errorText);
+      return;
+    }
+    const reader=response.body.getReader();
+    let fullReply="";
+    while(true){
+      const{value,done}=await reader.read();
+      if(done)break;
+
+     const chunk=decoder.decode(value);
+     let lines=chunk.split('\n');
+     for(let line of lines){
+      if(line.startsWith("data: ")){
+        const jsonData=line.replace("data: ","").trim();
+        if(jsonData==="[DONE]"){
+          break;
+        }
+        try{
+          const parsed=await JSON.parse(jsonData);
+          delta=parsed.choices[0]?.delta?.content;
+          if(delta){
+            aiMsgText.innerHTML+=delta;
+            fullReply+=delta;
+          }
+        }catch(e){
+        }
+      }
+    }
+    }
+    const aiReply=await markDown(fullReply);
+    aiMsgText.innerHTML=aiReply;
+    currentChat.push({sender:"AI",message:aiReply});
+    allThreads[currentThreadIndex]=currentChat;
+    localStorage.setItem("chatThreads",JSON.stringify(allThreads));
+    updateHistory();
+  }catch(error) {
+    console.error("Fetch error:",error);
+    const errorMsg =`Fetch failed: ${error.message}`;
+    addMessage("AI",errorMsg);
+    currentChat.push({sender:"AI",message:errorMsg});
+  }
+}
+
+async function addMessage(sender, message){
+  const messageDiv=document.createElement("div");
+  messageDiv.classList.add("message",sender==="You"?"user-message":"ai-message");
+  const messageText=document.createElement("p");
+  messageText.innerHTML=message;
+  messageDiv.appendChild(messageText);
+  chatBox.appendChild(messageDiv);
+  chatBox.scrollTop=chatBox.scrollHeight;
+}
+
+function renderChat(messages){
+  chatBox.innerHTML = "";
+  messages.forEach(msg => addMessage(msg.sender, msg.message));
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+function updateHistory(){
+  historyList.innerHTML="";
+  allThreads.forEach((thread,index)=>{
+    const li=document.createElement("li");
+    const preview=thread[0]?.message?.slice(0, 30)||"Empty Chat";
+    li.textContent=`Chat ${index + 1}: ${preview}`;
+    li.addEventListener("click",()=>{
+      currentThreadIndex=index;
+      currentChat=[...thread];
+      renderChat(currentChat);
+    });
+    historyList.appendChild(li);
+  });
+}
+
+async function markDown(message){
+  const markDownedHTML=await fetch('https://api.github.com/markdown',{
+    method:'POST',
+    headers:{
+      'Content-Type':'application/json'
+    },
+    body:JSON.stringify({
+      text:message,
+      model:"markDown"
+    })
+  })
+  let markDownedText=await markDownedHTML.text();
+  return markDownedText;
+}
diff --git a/Atharv/Chat app/style.css b/Atharv/Chat app/style.css
@@ -0,0 +1,122 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: sans-serif;
+  background: white;
+  display: flex;
+}
+
+#left-section {
+  height: 100vh;
+  width: 25vw;
+  border-right: 2px solid black;
+  padding: 20px;
+}
+
+#right-section {
+  height: 100vh;
+  width: 75vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+#heading {
+  margin: 0;
+}
+
+#new-chat-btn {
+  background-color: #0092e0;
+  color: white;
+  border-radius: 10px;
+  padding: 10px 20px;
+  margin-bottom: 15px;
+  cursor: pointer;
+  font-size: 16px;
+  align-self: flex-end;
+}
+
+#app {
+  width: 100%;
+  height: 80vh;
+}
+
+#chat-box {
+  display: flex;
+  flex-direction: column;
+  height: 80%;
+  width: 100%;
+  padding: 10px;
+  overflow-y: auto;
+  margin-bottom: 50px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#input-area {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+#user-input {
+  width: 90%;
+  height: 40px;
+  border: 2px solid black;
+  border-radius: 10px;
+  margin-right: 5%;
+  font-size: 16px;
+}
+
+#enter-btn {
+  width: 5%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#enter-btn img {
+  width: 30px;
+  height: 30px;
+}
+
+.message {
+  max-width: 70%;
+  margin: 10px;
+  padding: 10px 15px;
+  border-radius: 15px;
+  font-size: 16px;
+  word-wrap: break-word;
+  display: inline-block;
+}
+
+.user-message {
+  background-color: #dcf8c6;
+  align-self: flex-end;
+  margin-left: auto;
+  text-align: right;
+}
+
+.ai-message {
+  background-color: #f1f0f0;
+  align-self: flex-start;
+  margin-right: auto;
+  text-align: left;
+}
+
+#history-list {
+  overflow-y: auto;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  margin-top: 10px;
+}
+
+#history-list li {
+  padding: 8px 8px;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+}
diff --git a/Atharv/Snappy site/index.html b/Atharv/Snappy site/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Snappy Ecommerce</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="selectors">
+    <label for="category">Category:</label>
+    <select id="category"></select>
+    <label for="tag">Tag:</label>
+    <select id="tag"></select>
+  </div>
+  <div id="items"></div>
+  <div class="pagination">
+    <button id="prev">Prev</button>
+    <span id="page-info"></span>
+    <button id="next">Next</button>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
+
+
+