Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andraxdev/speak-gpt-web
Web version of SpeakGPT created using ReactJS and Google Material Design 3.
https://github.com/andraxdev/speak-gpt-web
api chatbot chatgpt chatgpt-client claude gemini gpt gpt-4 gpt-4o gpt-vision jsx llama material-design openai openai-api perplexity react reactjs
Last synced: 2 months ago
JSON representation
Web version of SpeakGPT created using ReactJS and Google Material Design 3.
- Host: GitHub
- URL: https://github.com/andraxdev/speak-gpt-web
- Owner: AndraxDev
- Created: 2024-04-06T20:04:59.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-14T20:43:10.000Z (8 months ago)
- Last Synced: 2024-05-21T06:11:57.942Z (7 months ago)
- Topics: api, chatbot, chatgpt, chatgpt-client, claude, gemini, gpt, gpt-4, gpt-4o, gpt-vision, jsx, llama, material-design, openai, openai-api, perplexity, react, reactjs
- Language: JavaScript
- Homepage: https://assistant.teslasoft.org
- Size: 7.1 MB
- Stars: 10
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# SpeakGPT Web
SpeakGPT is an advanced and highly intuitive open-source AI assistant that utilizes the powerful OpenAI technologies to provide you with unparalleled performance and functionality.
This is a desktop version of SpeakGPT created using ReactJS and Google Material Design 3.
> [!NOTE]
>
> This project is a part of my Bachelor Thesis. Attribution is required to use this work. Copyright (c) 2023-2024 Dmytro Ostapenko. All rights reserved.
>
> Cite as: Dmytro Ostapenko (2024), "Review Program Automation Using Copilot Services" Bachelor Thesis, Technical University of Košice, 2024.
## Try it out
Launch SpeakGPT web: [https://assistant.teslasoft.org/](https://assistant.teslasoft.org/)
View SpeakGPT for Android: [https://github.com/AndraxDev/speak-gpt](https://github.com/AndraxDev/speak-gpt).
## Screenshots
## Features
- [x] Chat
- [x] Images generation (DALL-e)
- [x] GPT 4 Vision (use your images and photos with ChatGPT)
- [x] System message
- [x] Prompts store
- [x] Quick assistant
- [x] A lot of different models
- [x] No captcha
- [x] Pay as you go system
- [x] Tips for newbies
- [x] Custom fine-tuned models are supported
- [x] Embedded assistant
- [x] Custom API endpoint
- [x] Supported models from OpenRouter like LLama, Gemini, Mistral, Perplexity, Claude and more
- [x] Playground
- [x] AI Photo editor
- [x] GPT 4o
## Embedded assistant
You can embed SpeakGPT into your website or app. Just use the following code:
```html
/* Can be customized depending on your needs */
.assistant-embedded {
width: 500px;
height: calc(100vh - 128px);
background-color: rgba(50, 50, 50, 0.4);
position: fixed;
right: 24px;
top: 100px;
z-index: 100000;
border-radius: 48px;
}
.assistant-iframe {
width: 100%;
height: 100%;
border: none;
background-color: transparent;
}
...
...
function switchAssistant() {
if (localStorage.getItem("assistantOpened") === "true") {
document.getElementById("speakgpt").style.display = "none";
localStorage.setItem("assistantOpened", "false")
} else {
document.getElementById("speakgpt").style.display = "block";
localStorage.setItem("assistantOpened", "true")
}
}
function loadAssistant() {
if (localStorage.getItem("assistantOpened") === "true") {
document.getElementById("speakgpt").style.display = "block";
} else {
document.getElementById("speakgpt").style.display = "none";
}
}
loadAssistant();
```
React implementation:
```jsx
import React, {useState} from "react";
function MyComponent() {
const [assistantIsOpened, setAssistantIsOpened] = useState(false);
return (
{
if (assistantIsOpened) {
setAssistantIsOpened(false);
} else {
setAssistantIsOpened(true);
}
}}>{assistantIsOpened ? "Close Assistant" : "Open Assistant"}
{
assistantIsOpened ?
: null
}
);
}
export default MyComponent;
```
## Customize assistant:
Assistant can be customized with a payload. Payload is a base64-encoded JSON string that contains params.
Payload goes after /embedded/ in the URL. Example:
```html
```
To make assistant working properly you must URL encode your payload.
```javascript
let encodedPayload = encodeURIComponent(btoa(json));
```
Example of payload:
```json
{
"name": "Example Chat",
"icon": "https://example.com/icon.png",
"description": "This assistant can provide you with relevant responses based on ...",
"initialMessage": "Hello, how are you?",
"initialResponse": "I'm fine, thank you.",
"systemMessage": "This is an example chat. Please be polite.",
"chatLocation": "exampleLocation"
}
```
- `name` - name that will be displayed on the top of the assistant window
- `icon` - URL to the icon that will be displayed on the top of the assistant window when conversation is empty
- `description` - description that will be displayed on the top of the assistant window when conversation is empty. Supports HTML
- `initialMessage` - a message that will be sent to the assistant when it's loaded
- `initialResponse` - response of assistant to make conversation work properly
- `systemMessage` - a message with additional content that are not shown in the chat and appended to the end of the chat history.
- `chatLocation` - location of the chat in the indexed database, don't use whitespaces or special characters
More params will be added in the future.
## API key safety:
SpeakGPT uses OpenAI API to provide you with the best experience. Using API-keys is more secure than using your username/password. Your personal info can't be obtained using API key. OpenAI provides cheap API access to their services. Your API key is stored locally on your device and is not shared with anyone. SpeakGPT does not collect any personal data. SpeakGPT is open-source and you can check the code yourself. Each release of SpeakGPT is checked on VirusTotal.
If you have any concerns you can secure either [revoke your API key](https://platform.openai.com/account/api-keys) or use a separate API key for SpeakGPT.
To secure your API key perform the following steps:
1. Make sure you have separate API key for SpeakGPT
2. Set up billing limit
3. Enable usage monitoring, so you can see how much resources SpeakGPT uses and how much it costs
4. If you have any concerns you can revoke your API key
> Why we obfuscate our code in production releases?
>
> Obfuscation and resources shrinking allows us to optimize app size, it performance and secure it against reverse engineering or tamper and make sure your credentials like API keys in a safe place. You can request an unobfuscated build or compile it by self to make sure our app is safe.
> Developer identity
>
> Developer name: Dmytro Ostapenko (AndraxDev)\
> Contact: [email protected], +421951829517\
> Legal address: Južná trieda 4B, 04001 Košice, Slovakia 04001\
> Legal entity ID: 55545386
## You are appreciated to:
- Report any bugs
- Support me :)
- Request new features. Don't forget to mark issue with a tag
## Buy me a coffee:
[](https://ko-fi.com/S6S6X3NCE)
## License
```
Copyright (c) 2023-2024 Dmytro Ostapenko. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```