HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>OPENAI GPT Chat</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="chat-container">
      <div id="chat-log"></div>
      <input type="text" id="chat-input" placeholder="Type your message here...">
      <button id="chat-send">Send</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@openai/api"></script>
    <script src="script.js"></script>
  </body>
</html>

JS (script.js):

const openai = require("@openai/api");

const chatLog = document.getElementById("chat-log");
const chatInput = document.getElementById("chat-input");
const chatSend = document.getElementById("chat-send");

const completion = new openai.Completion({
  apiKey: "YOUR_API_KEY",
});

chatSend.addEventListener("click", () => {
  const prompt = chatInput.value;
  chatInput.value = "";
  chatLog.innerHTML += `<div class="user-message">${prompt}</div>`;
  completion
    .create({
      engine: "text-davinci-002",
      prompt: prompt,
      maxTokens: 150,
      n: 1,
      stop: ["\n"],
    })
    .then((response) => {
      const message = response.choices[0].text.trim();
      chatLog.innerHTML += `<div class="bot-message">${message}</div>`;
    });
});

CSS (style.css):

#chat-container {
  border: 1px solid #ccc;
  padding: 10px;
  width: 400px;
}

#chat-log {
  height: 300px;
  overflow-y: scroll;
}

.user-message {
  font-weight: bold;
}

.bot-message {
  color: #666;
}

Manifest.json:

{
  "manifest_version": 2,
  "name": "OPENAI GPT Chat",
  "description": "A chat plugin for OPENAI GPT",
  "version": "1.0",
  "icons": {
    "48": "icon.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "OPENAI GPT Chat",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

Firefox plugin file names:

  • HTML: popup.html
  • JS: popup.js
  • CSS: popup.css
  • Manifest: manifest.json
  • Icon: icon.png
Напиши примерный скрипт html js css manifest и подпиши названия файлов плагина для Firefox который можно закрепить в панели инструментов При нажатии на плагин будет открываться окошко переписки с ней

原文地址: https://www.cveoy.top/t/topic/bWPL 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录