import { keyboard } from '@testing-library/user-event/dist/keyboard';
import { RequiredError } from 'openai/dist/base'
import React from 'react'
import { Component } from 'react'
import { Container, Form, Button, Card } from 'react-bootstrap'

const { Configuration, OpenAIApi } = require("openai");

class ProductDescription extends Component {
    constructor() {
        super()
        this.state = {
            heading: 'The response from the AI will be shown here',
            response: '...... await the response'
        }
    }

    onFormSubmit = e => {
        // start by prevening the default
        e.preventDefault()

        const formData = new FormData(e.target),
            formDataObj = Object.fromEntries(formData.entries())
        console.log(formDataObj.productName)
        // OPENAI
        this.setState({
            heading: `AI product description suggestions for: ${formDataObj.productName}`,
            response: 'the response from OpenAI api will be shown here'
        })
    }

    render() {
        return (
            <div>
                <Container>
                    <br />
                    <br />
                    <h1>generate product descriptions</h1>
                    <br />
                    <h4>generate product descriptions for any types of products, simply enter the name and productdescriptions to the card</h4>
                    <br />
                    <br />
                    <Form onSubmit={this.onFormSubmit}>
                        <Form.Group className='mb-3' controlId='formBasicEmail'>
                            <Form.Label>What products would you like to get a description for?</Form.Label>
                            <Form.Control type='text' name='productName' placeholder='Enter product name' />
                            <Form.Text className='text-muted'>Enter as much information as possible for more accurate descriptions</Form.Text>
                        </Form.Group>
                        <Button variant="primary" size="lg" type="submit">Get AI suggestions</Button>
                    </Form>
                    <br />
                    <br />

                    <Card>
                        <Card.Body>
                            <Card.Title><h1>{this.state.heading}</h1></Card.Title>
                            <hr />
                            <br />
                            <Card.Text>
                                <h4>
                                    {this.state.response}
                                </h4>
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Container>
                <br />
                <br />
                <br />
                <br />
            </div>
        )
    }
}
const configuration = new Configuration({
  apiKey: 'your-api-key',
});
const openai = new OpenAIApi(configuration);

const response = await openai.createCompletion({
  model: "text-davinci-003",
  prompt: "generate product description explanation for the following product  apple iPhone 11\n\nThe Apple iPhone 11 is the latest version of Apple's iconic smartphone. Featuring a stunning new design, an A13 Bionic processor, and a dual rear-facing camera system, the iPhone 11's hardware is designed to give you an amazing mobile experience. With the ability to capture stunning 4K Ultra HD video, and a vibrant Retina HD display, the iPhone 11 provides unbeatable visual and audio quality. Additionally, iPhone 11 features an innovative range of features including Face ID, wireless charging, and a water-resistant body. With the power of iOS 13, you can safely and securely surf the web, communicate with ease, and stay connected with the people that matter most. With the Apple iPhone 11, you have the perfect combination of style and power.",
  temperature: 1,
  max_tokens: 200,
  top_p: 1,
  frequency_penalty: 0,
  presence_penalty: 0,
});
export default ProductDescription

我用过npm包，不知道为什么它会抛出一个错误，只是按照tutorial来寻求一些帮助，如果我们注解掉API部分，那么看起来一切都很好，但不能这样做，我想在react中创建一个内容生成器工具。js在这个帮助下，当我们添加一些查询到输入字段，并按下提交按钮后，我们得到了关于查询的详细段落这个openai