|
|
@@ -0,0 +1,156 @@
|
|
|
+import { useRef, useState } from 'react'
|
|
|
+// import './App.less'
|
|
|
+import { Button ,Spin,message} from 'antd';
|
|
|
+import { AudioOutlined ,RedditOutlined} from '@ant-design/icons';
|
|
|
+// import 'antd/dist/reset.css';
|
|
|
+import { Configuration, OpenAIApi } from "openai";
|
|
|
+
|
|
|
+interface answerListType{
|
|
|
+ type: string,
|
|
|
+ content?: string,
|
|
|
+ isFinshed: number,
|
|
|
+}
|
|
|
+const openai_api_key = "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";
|
|
|
+
|
|
|
+export async function davinciCompletion(prompt:String) {
|
|
|
+ const requestOptions = {
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ 'Authorization': 'Bearer ' + String(openai_api_key)
|
|
|
+ },
|
|
|
+ body: JSON.stringify({
|
|
|
+ "model": "gpt-3.5-turbo",
|
|
|
+ // "prompt": prompt,
|
|
|
+ // "temperature": 0.7,
|
|
|
+ // "max_tokens": 256,
|
|
|
+ // "top_p": 1,
|
|
|
+ // "frequency_penalty": 0,
|
|
|
+ // "presence_penalty": 0
|
|
|
+ "messages":
|
|
|
+ [
|
|
|
+ {"role": "user",
|
|
|
+ "content": prompt
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ };
|
|
|
+ const response = await fetch('https://api.openai.com/v1/chat/completions', requestOptions);
|
|
|
+ const data = await response.json();
|
|
|
+ // const text = data.choices[0].text;
|
|
|
+ console.log(data);
|
|
|
+ const text = data.choices[0].message.content;
|
|
|
+ return text;
|
|
|
+}
|
|
|
+export function ChatGPT() {
|
|
|
+ const [inputValue, setInputValue] = useState<string>("")
|
|
|
+ const [answerList, setAnswerList] = useState<answerListType[]>([])
|
|
|
+ const preItem = useRef<HTMLDivElement>(null)
|
|
|
+
|
|
|
+ const [messageApi,contextHolder] = message.useMessage();
|
|
|
+ const configuration = new Configuration({
|
|
|
+ apiKey: "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",
|
|
|
+ // apiKey:"FCF62D974F67203BD8"
|
|
|
+ });
|
|
|
+ const openai = new OpenAIApi(configuration);
|
|
|
+
|
|
|
+
|
|
|
+ const quize = ()=>{
|
|
|
+ console.log("提问",inputValue)
|
|
|
+ setAnswerList([...answerList,{
|
|
|
+ type:'question',
|
|
|
+ content:inputValue,
|
|
|
+ isFinshed: 1,
|
|
|
+ },{
|
|
|
+ type: 'answer',
|
|
|
+ content: '正在思考',
|
|
|
+ isFinshed: 0,
|
|
|
+ }])
|
|
|
+ console.log("resf",preItem)
|
|
|
+ preItem?.current?.scrollIntoView()
|
|
|
+ setInputValue("")
|
|
|
+ getMessage(inputValue)
|
|
|
+ }
|
|
|
+
|
|
|
+ const getMessage = async (questionText:string)=>{
|
|
|
+
|
|
|
+ // openai.createCompletion({
|
|
|
+ // model: "text-davinci-003",
|
|
|
+ // prompt: questionText,
|
|
|
+ // max_tokens: 600,
|
|
|
+ // temperature: 1,
|
|
|
+ davinciCompletion(questionText
|
|
|
+ ).then((response )=>{
|
|
|
+ // 打印 API 返回的结果
|
|
|
+ console.log("我的回答是");
|
|
|
+ console.log(response,answerList);
|
|
|
+ setAnswerList(answerList=>answerList.map((item,index)=>{
|
|
|
+ if(index<answerList.length-1){
|
|
|
+ return item
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ type: 'answer',
|
|
|
+ content: response.replace(/\n{2}/, " "),
|
|
|
+ isFinshed: 1,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ }).catch((e)=>{
|
|
|
+ messageApi.open({
|
|
|
+ type: 'error',
|
|
|
+ content: '你的 Key 失效了！',
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="ChatGPT">
|
|
|
+ {contextHolder}
|
|
|
+ <div className='input_box'>
|
|
|
+ <input type="text" className='input' value={inputValue} onChange={e=>setInputValue(e.target.value)}></input>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ size='large'
|
|
|
+ className='btn'
|
|
|
+ onClick={quize}
|
|
|
+ >提问</Button>
|
|
|
+ </div>
|
|
|
+ <div className='answer_box'>
|
|
|
+ <div className='answer'>{
|
|
|
+ answerList.map((item,index)=>{
|
|
|
+ if(item.type==='question'){
|
|
|
+ // 问题
|
|
|
+ return (
|
|
|
+ <div className='item' key={index}>
|
|
|
+ <div><AudioOutlined style={{fontSize:'24px',color:'#646cffaa'}}/> </div>
|
|
|
+ <span className='span'>{item.content}</span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }else{
|
|
|
+ // 回答
|
|
|
+ if(item.isFinshed === 0){
|
|
|
+ // 加载中
|
|
|
+ return (
|
|
|
+ <div className='item' ref={preItem} key={index}>
|
|
|
+ <div><RedditOutlined style={{fontSize:'24px',color:'#42b883aa'}}/> </div>
|
|
|
+ <span className='span'><Spin /></span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }else{
|
|
|
+ // 回复答案
|
|
|
+ return (
|
|
|
+ <div className='item' key={index}>
|
|
|
+ <div><RedditOutlined style={{fontSize:'24px',color:'#42b883aa'}}/> </div>
|
|
|
+ <span className='span'><pre> {item.content} </pre></span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+// export default ChatGPT
|
