speak gpt web
1.0.0
SpeakGPT は、強力な OpenAI テクノロジーを利用して比類のないパフォーマンスと機能を提供する、高度で直感的なオープンソース AI アシスタントです。
これは、ReactJS と Google マテリアル デザイン 3 を使用して作成された SpeakGPT のデスクトップ バージョンです。
注記
このプロジェクトは私の学士論文の一部です。この作品を使用するには帰属が必要です。著作権 (c) 2023-2024 ドミトロ・オスタペンコ。無断転載を禁じます。
引用: Dmytro Ostapenko (2024)、「Review Program Automation using Copilot Services」学士論文、コシツェ工科大学、2024 年。
SpeakGPT Web を起動します: https://assistant.teslasoft.org/
SpeakGPT for Android を表示します: https://github.com/AndraxDev/speak-gpt。
SpeakGPT を Web サイトまたはアプリに埋め込むことができます。次のコードを使用するだけです。
< 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 >反応の実装:
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 ; アシスタントはペイロードを使用してカスタマイズできます。ペイロードは、パラメータを含む、base64 でエンコードされた JSON 文字列です。ペイロードは URL の /embedded/ の後に続きます。例：
< iframe src =" https://assistant.teslasoft.org/embedded?payload=eyJuYW1lIjoiRXhhbXBsZSBDaGF0IiwiaW5pdGlhbE1lc3NhZ2UiOiJIZWxsbywgaG93IGFyZSB5b3U%2FIiwiaW5pdGlhbFJlc3BvbnNlIjoiSSdtIGZpbmUsIHRoYW5rIHlvdS4iLCJzeXN0ZW1NZXNzYWdlIjoiVGhpcyBpcyBhbiBleGFtcGxlIGNoYXQuIFBsZWFzZSBiZSBwb2xpdGUuIiwiY2hhdExvY2F0aW9uIjoiZXhhbXBsZUNoYXQifQ%3D%3D " > </ iframe >アシスタントを適切に動作させるには、ペイロードを URL エンコードする必要があります。
let encodedPayload = encodeURIComponent ( btoa ( 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 - アシスタントウィンドウの上部に表示される名前icon - 会話が空のときにアシスタント ウィンドウの上部に表示されるアイコンへの URLdescription - 会話が空のときにアシスタント ウィンドウの上部に表示される説明。 HTMLをサポートinitialMessage - ロード時にアシスタントに送信されるメッセージinitialResponse - 会話を適切に機能させるためのアシスタントの応答systemMessage - チャットには表示されず、チャット履歴の最後に追加される追加コンテンツを含むメッセージ。chatLocation - インデックス付きデータベース内のチャットの場所。空白や特殊文字は使用しないでください。将来的にはさらに多くのパラメータが追加される予定です。
SpeakGPT は OpenAI API を使用して最高のエクスペリエンスを提供します。 API キーを使用することは、ユーザー名/パスワードを使用するよりも安全です。 APIキーを使用して個人情報を取得することはできません。 OpenAI は、サービスへの安価な API アクセスを提供します。 API キーはデバイス上にローカルに保存され、誰とも共有されません。 SpeakGPT は個人データを収集しません。 SpeakGPT はオープンソースであり、コードを自分でチェックできます。 SpeakGPT の各リリースは VirusTotal でチェックされます。懸念がある場合は、API キーを取り消すか、SpeakGPT に別の API キーを使用することで安全を確保できます。
API キーを保護するには、次の手順を実行します。
製品リリースでコードを難読化するのはなぜですか?
難読化とリソースの縮小により、アプリのサイズとパフォーマンスを最適化し、リバース エンジニアリングや改ざんから保護し、API キーなどの資格情報を安全な場所に保管できるようになります。難読化されていないビルドをリクエストするか、自分でコンパイルして、アプリが安全であることを確認できます。
開発者のアイデンティティ
開発者名: Dmytro Ostapenko (AndraxDev)
連絡先: [email protected]、+421951829517
正式な住所: Južná Trya 4B, 04001 Košice, Slovakia 04001
法人ID: 55545386
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.
