API tools faq
paste
Guest User

SwagGPT-Code

a guest
Jun 16th, 2023
3,285
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.25 KB | Source Code | 1 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>SwagGPT</title>
  5.     <style>
  6.         body {
  7.             background-color: #333;
  8.             color: #fff;
  9.             font-family: 'Courier New', monospace;
  10.         }
  11.  
  12.         #chatWindow {
  13.             width: 60%;
  14.             height: 400px;
  15.             margin: 20px auto;
  16.             border: 2px solid #fff;
  17.             border-radius: 5px;
  18.             padding: 20px;
  19.             overflow-y: scroll;
  20.             background-color: #000;
  21.         }
  22.  
  23.         #inputField {
  24.             width: 58%;
  25.             margin: 20px auto;
  26.             padding: 10px;
  27.             display: block;
  28.             background-color: #000;
  29.             color: #fff;
  30.             border: none;
  31.             border-radius: 5px;
  32.         }
  33.  
  34.         #sendButton {
  35.             display: block;
  36.             width: 60%;
  37.             margin: 0 auto;
  38.             padding: 10px;
  39.             background-color: #ff4500;
  40.             color: #fff;
  41.             border: none;
  42.             border-radius: 5px;
  43.             cursor: pointer;
  44.         }
  45.  
  46.         #sendButton:hover {
  47.             background-color: #ff6347;
  48.         }
  49.  
  50.         #logo {
  51.             display: block;
  52.             width: 200px;
  53.             margin: 20px auto;
  54.         }
  55.  
  56.         #subtitle {
  57.             text-align: center;
  58.             font-style: italic;
  59.         }
  60.     </style>
  61. </head>
  62.  
  63. <body>
  64.     <img id="logo" src="swaggpt.png" alt="SwagGPT Logo">
  65.     <div id="subtitle">SwagGPT, powered by Der Postillon & c't 3003</div>
  66.    <div id="chatWindow">
  67.        <ul id="chat"></ul>
  68.    </div>
  69.    <input id="inputField" type="text" placeholder="Type your message here..." />
  70.    <button id="sendButton" onclick="generateResponse()">Drop the beat</button>
  71.    <script>
  72.        const OPENAI_API_KEY = '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';
  73.         var messages = [{role:'system', content: 'Du bist SwagGPT, ein eher unfreundlicher, aber dafür umso swaggiger Chatbot. Du bist der beste Rapper der Welt, wie. Benutze Füllwörter wie "sheesh", "Diggi","turn up". Ersetze "ein" immer durch "1". Benutze "vong".'}];
  74.            // Add an event listener to the input field that listens for key down events
  75.            document.getElementById('inputField').addEventListener('keydown', function(event) {
  76.             // Check if the key pressed was the enter key
  77.             if (event.key === 'Enter') {
  78.                 // Prevent the default action to stop the enter key from creating a new line in the input field
  79.                 event.preventDefault();
  80.                 // Call the generateResponse function
  81.                 generateResponse();
  82.             }
  83.         });
  84.                async function generateResponse() {
  85.             var inputText = document.getElementById('inputField').value;
  86.             let chat = document.getElementById('chat');
  87.             chat.innerHTML += `<li>Du: ${inputText}</li>`;
  88.             var sentMessages = [...messages];
  89.             document.getElementById('inputField').value = '';
  90.             messages.push({ role: "user", content: inputText });
  91.             sentMessages.push({ role: "user", content: inputText + '\n Antworte als SwagGPT in maximal 30 Wörtern.' });
  92.             console.log(messages);
  93.             console.log(sentMessages);
  94.             const response = await fetch('https://api.openai.com/v1/chat/completions', {
  95.                 method: "POST",
  96.                 headers: {
  97.                     "Content-Type": "application/json",
  98.                     Authorization: `Bearer ${OPENAI_API_KEY}`,
  99.                 },
  100.                 body: JSON.stringify({
  101.                     model: "gpt-3.5-turbo",
  102.                     messages: sentMessages,
  103.                     temperature: 1.0,
  104.                 }),
  105.             });
  106.  
  107.             if (response.ok) {
  108.                 const data = await response.json();
  109.                 console.log(data);
  110.                 let outputText = data.choices[0].message.content;
  111.                 chat.innerHTML += `<li>SwagGPT: ${outputText}</li>`;
  112.                 messages.push({ role: "assistant", content: outputText });
  113.             }
  114.             else {
  115.                 console.error(`Error: ${response.status}`);
  116.                 return null;
  117.             }
  118.         }
  119.     </script>
  120. </body>
  121. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!