sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Merge pull request 'backend preps' (#2) from React-Group/interstellar_ai:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/2
This commit is contained in:
YasinOnm08 2024-09-18 14:52:52 +02:00
commit 3b5796cae6
9 changed files with 147 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -34,3 +34,5 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
api_key.txt

4
app/Conversation.tsx → app/ConversationFrontend.tsx
View file

@ -7,7 +7,7 @@ interface ConversationProps {
onCopyClick: () => void;
}
const Conversation = React.forwardRef<HTMLDivElement, ConversationProps>(
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
({ messages, onResendClick, onEditClick, onCopyClick }, ref: ForwardedRef<HTMLDivElement>) => {
return (
<div className="output">
@ -40,4 +40,4 @@ const Conversation = React.forwardRef<HTMLDivElement, ConversationProps>(
}
);
export default Conversation;
export default ConversationFrontend;

76
app/InputBackend.tsx Normal file
View file

@ -0,0 +1,76 @@
import React from 'react';
import InputFrontend from './InputFrontend';
import ConversationFrontend from './ConversationFrontend';
import { Mistral } from '@mistralai/mistralai';
async function prompt_mistral(model: string, prompt: string, system: string) {
const apiKey = "m3kZRjN8DRSIo88r8Iti9hmKGWIklrLY";
const client = new Mistral({ apiKey: apiKey });
var chatResponse = await client.chat.complete({
model: model,
messages: [{ role: 'user', content: prompt }, { role: 'system', content: system, }],
});
if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
if (chatResponse.choices[0].message.content) {
messages.push('AI: ', chatResponse.choices[0].message.content);
console.error('Error: Brain Not Found');
}
} else {
console.error('Error: Unexpected API response:', chatResponse);
}
}
const handleSendClick = (message: string) => {
messages.push('User: ', message);
prompt_mistral("mistral-large-latest", message, "You are a helpful assistant.")
};
const handleMicClick = () => {
console.log('Mic clicked!');
// Do something when the mic button is clicked
};
var messages = [
'User: Hello!',
'AI: Hi there!',
'User: How are you?',
'AI: I’m good, thank you!'
];
const handleResendClick = () => {
console.log('Resend button clicked');
// Handle resend action
};
const handleEditClick = () => {
console.log('Edit button clicked');
// Handle edit action
};
const handleCopyClick = () => {
console.log('Copy button clicked');
// Handle copy action
};
const InputBackend = () => {
return (
<div>
<ConversationFrontend
messages={messages}
onResendClick={handleResendClick}
onEditClick={handleEditClick}
onCopyClick={handleCopyClick}
/>
<InputFrontend
message=""
onSendClick={handleSendClick}
onMicClick={handleMicClick}
/>
</div>
);
};
export default InputBackend;

21
app/InputForm.tsx
View file

@ -1,21 +0,0 @@
import React from 'react';
const InputForm: React.FC = () => {
return (
<form className="input" method="POST" action="" id="inputForm">
<input
type="text"
name="user_message"
placeholder="Type your message here..."
/>
<button type="submit" name="option" value="chat">
<img src="/img/send.svg" alt="send" />
</button>
<button type="submit" name="option" value="voice">
<img src="/img/microphone.svg" alt="microphone" />
</button>
</form>
);
};
export default InputForm;

37
app/InputFrontend.tsx Normal file
View file

@ -0,0 +1,37 @@
import React, { useState, ForwardedRef } from 'react';
interface InputProps {
message: string;
onSendClick: (message: string) => void;
onMicClick: () => void;
}
const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
({ message, onSendClick, onMicClick }, ref: ForwardedRef<HTMLDivElement>) => {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
return (
<div className="input" id="inputForm">
<input
type="text"
name="user_message"
placeholder="Type your message here..."
value={inputValue}
onChange={handleInputChange}
/>
<button type="submit" onClick={() => onSendClick(inputValue)}>
<img src="/img/send.svg" alt="send" />
</button>
<button type="submit" onClick={onMicClick}>
<img src="/img/microphone.svg" alt="microphone" />
</button>
</div>
);
}
);
export default InputFrontend;

12
app/backend/ai_api.ts
View file

@ -1,12 +0,0 @@
import ollama from 'ollama'
async function name(model: string, prompt: string, system: string,) {
var message = [{ role: 'user', content: prompt }, { role: 'system', content: system }]
var response = await ollama.chat({ model: model, messages: message, stream: true })
for await (const part of response) {
process.stdout.write(part.message.content)
}
}

34
app/page.tsx
View file

@ -4,8 +4,7 @@ import React, { useState, useEffect, useRef } from 'react';
import Header from './Header';
import History from './History';
import Models from './Models';
import Conversation from './Conversation';
import InputForm from './InputForm';
import InputBackend from './InputBackend';
import './styles/master.css';
const LandingPage: React.FC = () => {
@ -41,28 +40,6 @@ const LandingPage: React.FC = () => {
setShowDivs(prevState => !prevState);
};
const messages = [
'User: Hello!',
'AI: Hi there!',
'User: How are you?',
'AI: I’m good, thank you!'
];
const handleResendClick = () => {
console.log('Resend button clicked');
// Handle resend action
};
const handleEditClick = () => {
console.log('Edit button clicked');
// Handle edit action
};
const handleCopyClick = () => {
console.log('Copy button clicked');
// Handle copy action
};
return (
<div className="App">
<Header toggleDivs={toggleDivs} showDivs={showDivs} />
@ -72,14 +49,7 @@ const LandingPage: React.FC = () => {
<Models />
</div>
<div className={`conversation-container ${showDivs ? 'expanded' : 'collapsed'}`}>
<Conversation
ref={conversationRef}
messages={messages}
onResendClick={handleResendClick}
onEditClick={handleEditClick}
onCopyClick={handleCopyClick}
/>
<InputForm />
<InputBackend />
</div>
</div>
</div>

26
package-lock.json generated
View file

@ -8,6 +8,8 @@
"name": "interstellar_ai",
"version": "0.1.0",
"dependencies": {
"@mistralai/mistralai": "^1.0.4",
"fs": "^0.0.1-security",
"next": "14.2.12",
"ollama": "^0.5.9",
"react": "^18",
@ -235,6 +237,14 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@mistralai/mistralai": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@mistralai/mistralai/-/mistralai-1.0.4.tgz",
"integrity": "sha512-fLFBD8r4KvITCkKlKcq2ievnNyLd7Oob4xMY7MkY04BqR4nffkTS49DqapnVkemuldtrmHidwPzwD7UT+yFC4A==",
"peerDependencies": {
"zod": ">= 3"
}
},
"node_modules/@next/env": {
"version": "14.2.12",
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.12.tgz",
@ -2323,6 +2333,12 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/fs": {
"version": "0.0.1-security",
"resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
"integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==",
"license": "ISC"
},
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -5319,6 +5335,16 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/zod": {
"version": "3.23.8",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
"integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
"license": "MIT",
"peer": true,
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
}
}
}

2
package.json
View file

@ -9,6 +9,8 @@
"lint": "next lint"
},
"dependencies": {
"@mistralai/mistralai": "^1.0.4",
"fs": "^0.0.1-security",
"next": "14.2.12",
"ollama": "^0.5.9",
"react": "^18",