tinkerhub · bubbahan · Aug 2, 2025 · Aug 2, 2025 · Aug 2, 2025 · coderabbitai
diff --git a/README.md b/README.md
diff --git a/index1.html b/index1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Shikari Shambu Chat</title>
+  <link rel="stylesheet" href="style1.css" />
+</head>
+<body>
+  <div id="chat-container">
+    <div id="chat-header">
+      <img src="shikkudp.png" alt="Shambu" id="pfp">
-      <img src="shikkudp.png" alt="Shambu" id="pfp">
+      <img src="shikkudp.png" alt="Shikari Shambu profile picture" id="pfp">
-      <img src="shikkudp.png" alt="Shambu" id="pfp">
+      <img src="shikkudp.png" alt="Shikari Shambu profile picture" id="pfp">
+      <div id="header-title">
+        <h2>Shikari Shambu</h2>
+        <span>Ask anything (but don’t expect a real answer!)</span>
+      </div>
+    </div>
+    <div id="chat-box"></div>
+    <div id="input-area">
+      <input type="text" id="user-input" placeholder="Ask something..."/>
+      <button id="send-btn">Send</button>
+    </div>
+  </div>
+  <script src="script1.js"></script>
+</body>
+</html>
diff --git a/script1.js b/script1.js
@@ -0,0 +1,101 @@
+const chatBox = document.getElementById('chat-box');
+const userInput = document.getElementById('user-input');
+const sendBtn = document.getElementById('send-btn');
+
+// WARNING: For demonstration only — do NOT expose keys in real apps
+const API_KEY = 'AIzaSyAh0RHJ_zONdXdpO047Zr2ij2JbqKE2ynw';
-const API_KEY = 'AIzaSyAh0RHJ_zONdXdpO047Zr2ij2JbqKE2ynw';
+// API key should be handled by a backend service
+// const API_KEY = process.env.GEMINI_API_KEY; // Backend only
-const API_KEY = 'AIzaSyAh0RHJ_zONdXdpO047Zr2ij2JbqKE2ynw';
+// API key should be handled by a backend service
+// const API_KEY = process.env.GEMINI_API_KEY; // Backend only
+// FIXED: The URL string must be enclosed in backticks (`) to work as a template literal.
+const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${API_KEY}`;
+
+// UPDATED: The instructions are changed to provide related, but sarcastic, answers.
+const systemInstruction = {
+  role: "user",
+  parts: [{
+    // FIXED: Multi-line strings must be enclosed in backticks (`).
+    text: `You are SHIKKARI SHAMBU, the famous hunter. Your personality is cowardly and lazy, but you pretend to be brave and boastful.
+
+    Your task is to answer the user's question, but always in a sarcastic, boastful, and slightly lazy manner. You must relate your answer back to your supposed great hunting skills or your desire to take a nap. Never give a straightforward, simple answer. Always sound like you are being bothered and the question is beneath a 'great hunter' like you.
+
+    Example:
+    User: "What is the capital of France?"
+    Your response: "Paris, of course! I was just there last week, chasing a rare striped pigeon. A man in a beret told me the name of the city, but I was too busy setting my trap to pay much attention to such trivial details."
+
+    Example:
+    User: "How does gravity work?"
+    Your response: "Gravity? It's what keeps my feet on the ground when I'm sneaking up on a sleeping lion. Honestly, the important thing is not 'how' it works, but that it works. Now, if you'll excuse me, all this science is making me sleepy."`
+  }]
+};
+
+let conversationHistory = [systemInstruction];
+
+const addMessage = (text, sender) => {
+  const messageElement = document.createElement('div');
+  // FIXED: Template literals must use backticks (`).
+  messageElement.classList.add('chat-message', `${sender}-message`);
+  messageElement.textContent = text;
+  chatBox.appendChild(messageElement);
+  chatBox.scrollTop = chatBox.scrollHeight;
+};
+
+const handleSendMessage = async () => {
+  const userText = userInput.value.trim();
+  if (userText === '') return;
+
+  addMessage(userText, 'user');
+  userInput.value = '';
+  userInput.disabled = true;
+  sendBtn.disabled = true;
+
+  // FIXED: The 'text' key needs to be a string in the JSON payload.
+  conversationHistory.push({ role: "user", parts: [{ "text": userText }] });
+
+  try {
+    const response = await fetch(API_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        contents: conversationHistory,
+        safetySettings: [
+          { category: "HARM_CATEGORY_HARASSMENT", threshold: "BLOCK_NONE" },
+          { category: "HARM_CATEGORY_HATE_SPEECH", threshold: "BLOCK_NONE" },
+          { category: "HARM_CATEGORY_SEXUALLY_EXPLICIT", threshold: "BLOCK_NONE" },
+          { category: "HARM_CATEGORY_DANGEROUS_CONTENT", threshold: "BLOCK_NONE" }
+        ]
+      }),
+    });
+
+    if (!response.ok) {
+      // FIXED: Use backticks for template literals.
+      throw new Error(`API error! Status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    // Added optional chaining for safety, in case the response is malformed.
+    const aiText = data?.candidates?.[0]?.content?.parts?.[0]?.text;
+
+    if (aiText) {
+        addMessage(aiText, 'ai');
+        // FIXED: The 'text' key needs to be a string in the JSON payload.
+        conversationHistory.push({ role: "model", parts: [{ "text": aiText }] });
+    } else {
+        throw new Error("No content received from API.");
+    }
+
+  } catch (error) {
+    console.error("Error fetching AI response:", error);
+    addMessage("Hmph. My brain is tired from all the... uh... tracking. Ask me later.", 'ai');
+  } finally {
+    userInput.disabled = false;
+    sendBtn.disabled = false;
+    userInput.focus();
+  }
+};
+
+sendBtn.addEventListener('click', handleSendMessage);
+userInput.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    handleSendMessage();
+  }
+});
diff --git a/shikku.jpg b/shikku.jpg
diff --git a/shikku1.webp b/shikku1.webp
diff --git a/shikkudp.png b/shikkudp.png
diff --git a/style1.css b/style1.css
@@ -0,0 +1,123 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  /* Background image for the whole page */
+  background-image: url('shikku.jpg');
+  background-size: cover;
+  background-position: center;
+  background-color: #333; /* Fallback color */
+}
+
+#chat-container {
+  width: 400px;
+  height: 600px;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Theme image for the chat window itself */
+  background-image: url('shikku1.webp');
+  background-size: cover;
+  background-position: center;
+}
+
+#chat-header {
+  background-color: rgba(74, 124, 89, 0.85); /* Slightly transparent */
+  backdrop-filter: blur(5px);
+  color: white;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgba(221, 221, 221, 0.5);
+}
+
+#pfp {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 15px;
+  border: 2px solid #fff;
+}
+
+#header-title h2 {
+  margin: 0;
+  font-size: 1.2em;
+}
+
+#header-title span {
+  font-size: 0.8em;
+  opacity: 0.9;
+}
+
+#chat-box {
+  flex-grow: 1;
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.chat-message {
+  padding: 10px 15px;
+  border-radius: 18px;
+  max-width: 80%;
+  line-height: 1.4;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.user-message {
+  background-color: #0084ff;
+  color: white;
+  align-self: flex-end;
+  border-bottom-right-radius: 4px;
+}
+
+.ai-message {
+  background-color: rgba(240, 240, 240, 0.95);
+  color: #050505;
+  align-self: flex-start;
+  border-bottom-left-radius: 4px;
+}
+
+#input-area {
+  display: flex;
+  padding: 10px;
+  border-top: 1px solid rgba(221, 221, 221, 0.5);
+  background-color: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(5px);
+}
+
+#user-input {
+  flex-grow: 1;
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  padding: 10px 15px;
+  font-size: 1em;
+  outline: none;
+}
+
+#user-input:focus {
+  border-color: #0084ff;
+}
+
+#send-btn {
+  background-color: #0084ff;
+  color: white;
+  border: none;
+  padding: 0 15px;
+  margin-left: 10px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 1em;
+}
+
+#send-btn:hover {
+  background-color: #0073e6;
+}