vue简单调取openai

openai越来越厉害了

一个简单的npm安装openai的小实验,成功调起即可

官方文档:https://platform.openai.com/docs/introduction

密钥申请链接:https://platform.openai.com/api-keys

一、先申请key

项目中安装openai

 npm i openai --save

 import OpenAI from 'openai';
 const openai = new OpenAI({
    apiKey: '你的openai密钥', 
    dangerouslyAllowBrowser: true,
 });
 
    //发送请求
  const req = async () => {
 
        //实现打字机效果
        const response = await openai.chat.completions.create({
            model: "gpt-3.5-turbo",
            messages: [{ "role": "user", "content": state.textarea }],
            stream: true,
        });
 
        for await (const part of response) {
            console.log(part.choices[0].delta);
        }
 
       //响应数据整体返回效果
        const response = await openai.chat.completions.create({
          model: "gpt-3.5-turbo",
          messages: [{"role": "user", "content": "Hello!"}],
        });
        console.log(chatCompletion.choices[0].message);
   }
 

发送成功,告诉我没有配额......

 看来光购买gpt4还不行,调取api需要专门付费......

(充够了💰,你就能变得更强大,钞能力)

### 如何在Vue项目中集成OpenAI API 为了在Vue项目中集成OpenAI API,开发者可以遵循一系列特定的方法来确保API调用的有效性和安全性。虽然提供的参考资料未直接提及此过程,但基于Web开发的最佳实践以及对Vue应用扩展的理解,以下是实现这一目标的方式。 #### 创建Vue组件用于展示和交互 首先,在Vue应用程序内创建一个新的组件,该组件负责处理与用户的互动并显示来自OpenAI的结果。这可以通过定义一个简单的`<template>`部分开始,其中包含必要的HTML标记以构建界面[^1]。 ```vue <!-- src/components/OpenAIDemo.vue --> <template> <div class="openai-demo"> <textarea v-model="inputText"></textarea> <button @click="generateResponse">Generate Response</button> <p>{{ response }}</p> </div> </template> <script> export default { data() { return { inputText: '', response: '' } }, methods: { async generateResponse() { try { const res = await fetch('/api/openai', { /* ... */ }) this.response = await res.text() } catch (error) { console.error('Error fetching OpenAI:', error) } } } } </script> ``` #### 设置后端代理服务 由于浏览器环境下的跨域资源共享(CORS)限制,通常建议设置一个服务器作为中间层来转发请求给OpenAI API。这个服务器可以用Node.js或其他任何支持HTTP请求的语言编写,并部署在同一域名下以便绕过CORS问题[^4]。 对于Express这样的Node.js框架来说,建立这样一个路由可能看起来像这样: ```javascript // server/routes/api.js const express = require('express') const axios = require('axios') const router = express.Router() router.post('/openai', async (req, res) => { try { const openAiRes = await axios({ method: 'post', url: 'https://api.openai.com/v1/engines/davinci-codex/completions', headers: { Authorization: `Bearer YOUR_OPENAI_API_KEY`, 'Content-Type': 'application/json' }, data: req.body }) res.json(openAiRes.data.choices[0].text.trim()) } catch (err) { console.log(err.message) res.status(500).send('Something went wrong.') } }) module.exports = router ``` 请注意替换`YOUR_OPENAI_API_KEY`为你自己的密钥。 #### 配置前端发送请求至后端接口 回到前面提到的Vue组件里,当点击按钮时触发`generateResponse()`方法,它应该向本地运行的服务器发出POST请求而不是直接访问OpenAI endpoints。这里假设后端已经按照上述方式搭建好并且监听于相对路径`/api/openai`上。 ```javascript methods: { async generateResponse() { try { const res = await fetch('/api/openai', { method: 'POST', body: JSON.stringify({ prompt: this.inputText }), headers: new Headers({ 'content-type': 'application/json' }) }) this.response = await res.text() } catch (error) { console.error('Error fetching OpenAI:', error) } } } ``` 通过这种方式,可以在保持前后端分离架构的同时安全有效地利用OpenAI的强大功能增强用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值