Skip to content

Updated index.html #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JoeyC121 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated index.html #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 23 additions & 37 deletions AI-based-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="<https://cdn.tailwindcss.com>"></script>
<script src="https://cdn.tailwindcss.com"></script>
<title>Streaming OpenAI API Completions in JavaScript</title>
<script type="module" src="index.js"></script>
</head>
<body
class="bg-white text-black min-h-screen flex items-center justify-center"
>
<div class="lg:w-1/2 2xl:w-1/3 p-8 rounded-md bg-gray-100">
<h1 class="text-3xl font-bold mb-6">
Streaming OpenAI API Completions in JavaScript
</h1>
<div id="resultContainer" class="mt-4 h-48 overflow-y-auto">
<p class="text-gray-500 text-sm mb-2">Generated Text</p>
<p id="resultText" class="whitespace-pre-line"></p>
</div>
<input
type="text"
id="promptInput"
class="w-full px-4 py-2 rounded-md bg-gray-200 placeholder-gray-500 focus:outline-none mt-4"
placeholder="Enter prompt..."
/>
<div class="flex justify-center mt-4">
<button
id="generateBtn"
class="w-1/2 px-4 py-2 rounded-md bg-black text-white hover:bg-gray-900 focus:outline-none mr-2 disabled:opacity-75 disabled:cursor-not-allowed"
>
Generate
</button>
<button
id="stopBtn"
disabled
class="w-1/2 px-4 py-2 rounded-md border border-gray-500 text-gray-500 hover:text-gray-700 hover:border-gray-700 focus:outline-none ml-2 disabled:opacity-75 disabled:cursor-not-allowed"
>
Stop
</button>
</div>
</head>
<body class="bg-gray-200 text-gray-800 min-h-screen flex items-center justify-center">
<div class="lg:w-1/2 2xl:w-1/3 p-8 rounded-md bg-white shadow-lg">
<h1 class="text-4xl font-bold mb-8 text-center">
Streaming OpenAI API Completions in JavaScript
</h1>
<div id="resultContainer" class="mt-4 h-48 overflow-y-auto p-4 bg-gray-50 border border-gray-200 rounded">
<p class="text-gray-600 text-sm mb-2">Generated Text</p>
<p id="resultText" class="whitespace-pre-line"></p>
</div>
<input type="text" id="promptInput" class="w-full px-4 py-3 mt-6 rounded-md bg-white border border-gray-300 placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" placeholder="Enter prompt..."/>
<div class="flex justify-center mt-6 space-x-4">
<button id="generateBtn" class="w-1/2 px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50">
Generate
</button>
<button id="stopBtn" disabled class="w-1/2 px-4 py-2 rounded-md border border-gray-300 text-gray-600 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50 disabled:bg-gray-200 disabled:text-gray-400">
Stop
</button>
</div>
</div>
</body>
</html>
</body>
</html>