Skip to content

Commit 7196031

Browse files
MichaelVandiMichaelVandi
committed
Added chatgpt demo created using langdrive inference
1 parent 7b19e49 commit 7196031

File tree

3 files changed

+210
-2
lines changed

3 files changed

+210
-2
lines changed

‎demos/langdrive-chatgpt-demo/chatbot.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
2+
// Selecting the send button and input field
3+
const sendButton = document.getElementById('send-button');
4+
const messageInput = document.getElementById('message-input');
5+
const chatHistory = document.getElementById('chat-history');
6+
7+
// Function to create a unique ID
8+
function createUniqueId() {
9+
return 'msg-' + Date.now();
10+
}
11+
12+
// Function to create a chat message div
13+
function createChatMessageDiv(userInput, messageId) {
14+
return `
15+
<div class="chat-message" id="${messageId}">
16+
<div class="flex items-center justify-between mb-6">
17+
<h1 class="text-xl font-semibold user-prompt">${userInput}</h1>
18+
<div class="text-gray-400">
19+
<button class="mr-2">
20+
<i class="fas fa-print"></i>
21+
</button>
22+
<button>
23+
<i class="fas fa-expand-arrows-alt"></i>
24+
</button>
25+
</div>
26+
</div>
27+
<div class="bg-gray-700 p-6 rounded-md mb-6 flex-1 ai-response">
28+
<p>thinking...</p>
29+
</div>
30+
<div class="flex justify-end mb-6">
31+
<button class="bg-blue-600 text-white p-2 rounded-md">
32+
<i class="fas fa-sync-alt"></i> Regenerate response
33+
</button>
34+
</div>
35+
</div>
36+
`;
37+
}
38+
39+
// Function to send API request
40+
async function sendApiRequest(userInput) {
41+
const apiUrl = 'https://api.langdrive.ai/v1/completions';
42+
const requestData = {
43+
prompt: userInput,
44+
model: 'mistralai/Mistral-7B-Instruct-v0.1', // Replace with your model name
45+
// max_tokens: 50,
46+
};
47+
48+
try {
49+
const response = await fetch(apiUrl, {
50+
method: 'POST',
51+
headers: {
52+
'Content-Type': 'application/json'
53+
},
54+
body: JSON.stringify(requestData)
55+
});
56+
57+
const data = await response.json();
58+
if (data.success) {
59+
return data.generated_text;
60+
} else {
61+
throw new Error('API response error');
62+
}
63+
} catch (error) {
64+
console.error('Error:', error);
65+
return 'Sorry something went wrong. Please try again.';
66+
}
67+
}
68+
69+
// Event listener for send button
70+
sendButton.addEventListener('click', async () => {
71+
const userInput = messageInput.value;
72+
if (userInput.trim() === '') return; // Prevent empty inputs
73+
74+
// Create and append the chat message
75+
const messageId = createUniqueId();
76+
77+
const chatMessageDiv = createChatMessageDiv(userInput, messageId);
78+
chatHistory.insertAdjacentHTML('beforeend', chatMessageDiv);
79+
80+
// Clear the input field
81+
messageInput.value = '';
82+
83+
// Get the response from the API
84+
const apiResponse = await sendApiRequest(userInput);
85+
86+
// Select the current chat message AI response div and update its content
87+
const currentMessageDiv = document.getElementById(messageId);
88+
89+
const aiResponseDiv = currentMessageDiv.querySelector('.ai-response p');
90+
aiResponseDiv.textContent = apiResponse;
91+
});
92+

‎demos/langdrive-chatgpt-demo/index.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Chatbot Interface</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9+
</link>
10+
<style>
11+
body {
12+
font-family: 'Inter', sans-serif;
13+
}
14+
</style>
15+
</head>
16+
17+
<body class="bg-gray-800 text-white font-sans">
18+
<div class="flex h-screen">
19+
<!-- Sidebar -->
20+
<div class="w-64 bg-gray-900 p-6">
21+
<div class="flex items-center justify-between mb-6">
22+
<button class="bg-blue-600 text-white p-2 rounded-md">
23+
<i class="fas fa-plus"></i> New chat
24+
</button>
25+
<button class="text-gray-400">
26+
<i class="fas fa-cog"></i>
27+
</button>
28+
</div>
29+
<div class="mb-6">
30+
<div class="flex items-center p-2 bg-blue-800 rounded-md mb-2">
31+
<i class="fas fa-comment-alt text-blue-500 mr-2"></i>
32+
<span>Chatbot definition expl</span>
33+
</div>
34+
</div>
35+
<div class="text-gray-400">
36+
<div class="flex items-center mb-2">
37+
<i class="fas fa-trash-alt mr-2"></i>
38+
<span>Clear conversations</span>
39+
</div>
40+
<div class="flex items-center mb-2">
41+
<i class="fas fa-sun mr-2"></i>
42+
<span>Light mode</span>
43+
</div>
44+
<div class="flex items-center mb-2">
45+
<i class="fab fa-discord mr-2"></i>
46+
<span>OpenAI Discord</span>
47+
</div>
48+
<div class="flex items-center mb-2">
49+
<i class="fas fa-sync-alt mr-2"></i>
50+
<span>Updates & FAQ</span>
51+
</div>
52+
<div class="flex items-center">
53+
<i class="fas fa-sign-out-alt mr-2"></i>
54+
<span>Log out</span>
55+
</div>
56+
</div>
57+
</div>
58+
59+
<!-- Main content -->
60+
<div class="flex-1 flex flex-col p-6" style="justify-content: space-between;">
61+
<div id="chat-history">
62+
<div class="chat-message">
63+
<div class="flex items-center justify-between mb-6">
64+
<h1 class="text-xl font-semibold user-prompt">What is a Chatbot?</h1>
65+
<div class="text-gray-400">
66+
<button class="mr-2">
67+
<i class="fas fa-print"></i>
68+
</button>
69+
<button>
70+
<i class="fas fa-expand-arrows-alt"></i>
71+
</button>
72+
</div>
73+
</div>
74+
<div class="bg-gray-700 p-6 rounded-md mb-6 flex-1 ai-response">
75+
<p>A chatbot is a computer program that simulates human conversation through voice commands or
76+
text
77+
chats or both. It can be integrated with various messaging platforms like Facebook
78+
Messenger,
79+
WhatsApp, WeChat, etc. and can be used for a variety of purposes, such as customer service,
80+
entertainment, and e-commerce.</p>
81+
</div>
82+
<div class="flex justify-end mb-6">
83+
<button class="bg-blue-600 text-white p-2 rounded-md">
84+
<i class="fas fa-sync-alt"></i> Regenerate response
85+
</button>
86+
</div>
87+
</div>
88+
89+
</div>
90+
91+
<!-- Input box with send button -->
92+
<div>
93+
94+
95+
<div class="mb-6 flex">
96+
<input id="message-input" type="text" placeholder="Type your message here..."
97+
class="w-full p-4 bg-gray-900 rounded-l-md focus:outline-none placeholder-gray-500">
98+
<button id="send-button" class="bg-blue-600 text-white px-4 rounded-r-md">
99+
<i class="fas fa-paper-plane"></i>
100+
</button>
101+
</div>
102+
103+
<div class="text-gray-400 text-xs mb-6">
104+
<p>ChatGPT Jan 9 Version. Free Research Preview. Our goal is to make AI systems more natural and
105+
safe to
106+
interact with. Your feedback will help us improve.</p>
107+
</div>
108+
109+
</div>
110+
111+
</div>
112+
</div>
113+
<script src="chatbot.js"></script>
114+
</body>
115+
116+
</html>

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)