import React, { useState } from ‘react’;
import { Card, Breadcrumb, Form, Input, Upload, Button, message } from ‘antd’;
import { PlusOutlined } from ‘@ant-design/icons’;
import { v4 as uuidv4 } from ‘uuid’;
import FormData from ‘form-data’;
const { Configuration, OpenAIApi } = require(‘openai’);
// Create a custom CustomFormData class that includes a getHeaders method
class CustomFormData extends FormData {
getHeaders() {
return {};
}
}
const Article = () => {
const [response, setResponse] = useState(‘’);
const [audioList, setAudioList] = useState();
const callOpenAICompletionAPI = async ({ title, formType, content }) => {
const configuration = new Configuration({
organization: ‘org-9QcLes4mblKdTtxRSBBYJTCd’,
apiKey: ‘■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■TFcbZP9q’,
formDataCtor: CustomFormData,
});
delete configuration.baseOptions.headers['User-Agent'];
const openai = new OpenAIApi(configuration);
let audio_text = '';
if (audioList.length > 0) {
const audioFile = audioList[0].originFileObj;
// Create a FormData object and attach the audio file
const formData = new FormData();
formData.append('file', audioFile, audioFile.name);
const audioTranscription = await openai.createTranscription(audioFile, 'whisper-1');
audio_text = audioTranscription.data.text;
}
const prompt = `Title: ${title}\nForm Type: ${formType}\nContent: ${content}\nAudio Text: ${audio_text || ''}\nPlease summarize the given information.`;
const getResponse = await openai.createCompletion({
model: 'text-davinci-003',
prompt,
temperature: 0,
max_tokens: 64,
top_p: 1.0,
frequency_penalty: 0.0,
presence_penalty: 0.0,
});
setResponse(getResponse.data.choices[0].text);
};
const handleSubmit = (values) => {
const { title, formType, content } = values;
callOpenAICompletionAPI({ title, formType, content });
};
const handleUpload = async (file) => {
const isAudio = file.type.startsWith(‘audio’);
if (!isAudio) {
message.error('Please upload an audio file!');
return Upload.LIST_IGNORE;
}
return true;
};
return (
<Card
title={
<Breadcrumb.Item>
Home
</Breadcrumb.Item>
<Breadcrumb.Item>Note Assistant</Breadcrumb.Item>
}
>
<Form initialValues={{ title: ‘’, formType: ‘’, content: ‘’ }} onFinish={handleSubmit}>
<Form.Item
label=“Topic”
name=“title”
rules={[{ required: false, message: ‘What is this about?’ }]}
>
<Input placeholder=“What is this about?” style={{ width: 400 }} />
</Form.Item>
<Form.Item
label=“Format”
name=“formType”
rules={[{ required: false, message: ‘What is it? Article? Meeting? Class?’ }]}
>
<Input placeholder=“What is it? Article? Meeting? Class?” style={{ width: 400 }} />
</Form.Item>
{/* Upload audio */}
<Form.Item label=“Upload Audio”>
<Upload
name=“audio”
listType=“picture-card”
className=“avatar-uploader”
showUploadList
fileList={audioList}
beforeUpload={handleUpload}
onPreview={() => {}}
onChange={({ fileList }) => setAudioList(fileList)}
>
{audioList.length >= 1 ? null : (
<div style={{ marginTop: 8 }}>
)}
</Form.Item>
<Form.Item
label=“Content”
name=“content”
rules={[{ required: true, message: ‘Please enter article content’ }]}
>
<Input.TextArea rows={10} />
</Form.Item>
<Form.Item>
{‘Summarize’}
</Form.Item>
);
};
export default Article;