speak gpt web

SpeakGPT-Web

SpeakGPT ist ein fortschrittlicher und äußerst intuitiver Open-Source-KI-Assistent, der die leistungsstarken OpenAI-Technologien nutzt, um Ihnen beispiellose Leistung und Funktionalität zu bieten.

Dies ist eine Desktop-Version von SpeakGPT, die mit ReactJS und Google Material Design 3 erstellt wurde.

Notiz

Dieses Projekt ist Teil meiner Bachelorarbeit. Für die Nutzung dieser Arbeit ist eine Quellenangabe erforderlich. Copyright (c) 2023-2024 Dmytro Ostapenko. Alle Rechte vorbehalten.

Zitieren als: Dmytro Ostapenko (2024), „Review Program Automation Using Copilot Services“, Bachelorarbeit, Technische Universität Košice, 2024.

Probieren Sie es aus

SpeakGPT-Web starten: https://assistant.teslasoft.org/

SpeakGPT für Android ansehen: https://github.com/AndraxDev/speak-gpt.

Screenshots

Merkmale

• Chatten
• Bilderzeugung (DALL-e)
• GPT 4 Vision (verwenden Sie Ihre Bilder und Fotos mit ChatGPT)
• Systemmeldung
• Eingabeaufforderungen speichern
• Schneller Assistent
• Viele verschiedene Modelle
• Kein Captcha
• Pay-as-you-go-System
• Tipps für Neulinge
• Benutzerdefinierte, fein abgestimmte Modelle werden unterstützt
• Eingebetteter Assistent
• Benutzerdefinierter API-Endpunkt
• Unterstützte Modelle von OpenRouter wie LLama, Gemini, Mistral, Perplexity, Claude und mehr
• Spielplatz
• AI-Fotoeditor
• GPT 4o

Eingebetteter Assistent

Sie können SpeakGPT in Ihre Website oder App einbetten. Verwenden Sie einfach den folgenden Code:

 < style >
    /* 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;
    }
</ style >

...

< div class =" assistant-embedded " id =" speakgpt " style =" display: none; " >
    < iframe src =" https://assistant.teslasoft.org/embedded " class =" assistant-iframe " > </ iframe >
</ div >

...

< script >
    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 ( ) ;
</ script >

Reaktionsimplementierung:

 import React , { useState } from "react" ;

function MyComponent ( ) {
    const [ assistantIsOpened , setAssistantIsOpened ] = useState ( false ) ;
    
    return (
        < div >
            < button className = { "btn" } onClick = { ( ) => {
                        if ( assistantIsOpened ) {
                            setAssistantIsOpened ( false ) ;
                        } else {
                            setAssistantIsOpened ( true ) ;
                        }
                    } } > { assistantIsOpened ? "Close Assistant" : "Open Assistant" }
                    < / button >
            
            {
                assistantIsOpened ? < div className = { "assistant-embedded" } >
                    < iframe src = { "https://assistant.teslasoft.org/embedded" } className = { "assistant-iframe" } title = { "SpeakGPT" } / >
                < / div > : null
            }
        < / div >
    ) ;
}

export default MyComponent ; 

Assistent anpassen:

Der Assistent kann mit einer Nutzlast angepasst werden. Payload ist eine Base64-codierte JSON-Zeichenfolge, die Parameter enthält. Die Nutzlast steht hinter /embedded/ in der URL. Beispiel:

 < iframe src =" https://assistant.teslasoft.org/embedded?payload=eyJuYW1lIjoiRXhhbXBsZSBDaGF0IiwiaW5pdGlhbE1lc3NhZ2UiOiJIZWxsbywgaG93IGFyZSB5b3U%2FIiwiaW5pdGlhbFJlc3BvbnNlIjoiSSdtIGZpbmUsIHRoYW5rIHlvdS4iLCJzeXN0ZW1NZXNzYWdlIjoiVGhpcyBpcyBhbiBleGFtcGxlIGNoYXQuIFBsZWFzZSBiZSBwb2xpdGUuIiwiY2hhdExvY2F0aW9uIjoiZXhhbXBsZUNoYXQifQ%3D%3D " > </ iframe >

Damit der Assistent ordnungsgemäß funktioniert, müssen Sie Ihre Nutzdaten per URL kodieren.

 let encodedPayload = encodeURIComponent ( btoa ( json ) ) ;

Beispiel für Nutzlast:

{
  "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, der oben im Assistentenfenster angezeigt wird
• icon – URL zum Symbol, das oben im Assistentenfenster angezeigt wird, wenn die Konversation leer ist
• description – Beschreibung, die oben im Assistentenfenster angezeigt wird, wenn die Konversation leer ist. Unterstützt HTML
• initialMessage – eine Nachricht, die beim Laden an den Assistenten gesendet wird
• initialResponse – Antwort des Assistenten, damit die Konversation ordnungsgemäß funktioniert
• systemMessage – eine Nachricht mit zusätzlichem Inhalt, der nicht im Chat angezeigt und am Ende des Chat-Verlaufs angehängt wird.
• chatLocation – Speicherort des Chats in der indizierten Datenbank. Verwenden Sie keine Leerzeichen oder Sonderzeichen

Weitere Parameter werden in Zukunft hinzugefügt.

API-Schlüsselsicherheit:

SpeakGPT verwendet die OpenAI-API, um Ihnen das beste Erlebnis zu bieten. Die Verwendung von API-Schlüsseln ist sicherer als die Verwendung Ihres Benutzernamens/Passworts. Ihre persönlichen Daten können nicht mit dem API-Schlüssel abgerufen werden. OpenAI bietet günstigen API-Zugriff auf seine Dienste. Ihr API-Schlüssel wird lokal auf Ihrem Gerät gespeichert und nicht an Dritte weitergegeben. SpeakGPT erhebt keine personenbezogenen Daten. SpeakGPT ist Open Source und Sie können den Code selbst überprüfen. Jede Version von SpeakGPT wird auf VirusTotal überprüft. Wenn Sie Bedenken haben, können Sie entweder Ihren API-Schlüssel widerrufen oder einen separaten API-Schlüssel für SpeakGPT verwenden.

Um Ihren API-Schlüssel zu sichern, führen Sie die folgenden Schritte aus:

1. Stellen Sie sicher, dass Sie über einen separaten API-Schlüssel für SpeakGPT verfügen
2. Abrechnungslimit einrichten
3. Aktivieren Sie die Nutzungsüberwachung, damit Sie sehen können, wie viele Ressourcen SpeakGPT verbraucht und wie viel es kostet
4. Wenn Sie Bedenken haben, können Sie Ihren API-Schlüssel widerrufen

Warum verschleiern wir unseren Code in Produktionsversionen?

Durch Verschleierung und Ressourcenverkleinerung können wir die App-Größe und -Leistung optimieren, sie vor Reverse Engineering oder Manipulation schützen und sicherstellen, dass Ihre Anmeldeinformationen wie API-Schlüssel an einem sicheren Ort sind. Sie können einen unverschlüsselten Build anfordern oder ihn selbst kompilieren, um sicherzustellen, dass unsere App sicher ist.

Entwickleridentität

Entwicklername: Dmytro Ostapenko (AndraxDev)
Kontakt: [email protected], [phone]
Rechtsadresse: Južná tryda 4B, 04001 Košice, Slowakei 04001
ID der juristischen Person: 55545386

Wir freuen uns über Sie:

• Melden Sie etwaige Fehler
• Unterstütze mich :)
• Fordern Sie neue Funktionen an. Vergessen Sie nicht, das Problem mit einem Tag zu kennzeichnen

Kauf mir einen Kaffee:

Lizenz

 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.