Spaces:

bmedia
/

sf-fbb

Running

App Files Files Community

bmedia commited on Dec 2, 2023

Commit

f0bf0ae

1 Parent(s): 0fdcdbc

Add 2 files

Browse files

Files changed (2) hide show

index.html +60 -19
main.js +34 -0

index.html CHANGED Viewed

@@ -1,19 +1,60 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Bedtime Stories Generator</title></head><body>
+    <div class="bg-black h-screen w-screen"></div>
+    <div class="flex h-screen top-0 bg-white">
+      <div class="flex-1">
+        <div class="object-contain pull-left overflow-auto p-5 lg:h-64" x-data="{{ foo: 'bar' }}">
+          <svg viewBox="0 0 800 200" width="100%" fill="white" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 0 0 0 150 200 150 200 0 z"></path>
+            <text y="140" x="100" stroke="#FF0000" fill="red" font-family="Helvetica" font-size="30" letter-spacing="16" text-anchor="middle">{ foo }</text>
+          </svg>
+        </div>
+        <div class="m-10 p-5 bg-white w-3/4">
+          <div class="flex justify-center pt-10 font-h1">
+            <h1 class="text-indigo-500 font-bold text-xl">Story Time!</h1>
+          </div>
+          <p class="font-body mx-2">Welcome to DaisyUI's Story Time! Here you can create your own infinite bedtime stories using DaisyUI's unlimited flow and the power of OpenAI's GPT-3!</p>
+        </div>
+        <div class="m-10 p-5 bg-white w-3/4">
+          <form x-data="{ open: false }">
+            <div class="relative group">
+              <div class="absolute remove compatible top-0 left-0 appearance w-full bg-black">
+                <div class="h-full w-full opacity-0 items-center justify-items-center p-5 bg-gray-500">
+                 <span class="w-5 h-5">
+                    <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M0 0h24v24H0z" fill="none"></path><path d="M6.72 16l-2.49-2.49 1.41-1.41 2.49 2.49 4.95-4.95-4.95-4.96-2.689 2.689zm3.213-2.056l-.589 1.902 1.063-2.056-1.746-1.117 1.388-1.388c-2.496-.12-4.786-.347-6.697.2-1.986 1.315-2.653 2.485-2.963 4.982l-.89 1.41zm3.708-3.708l2.596 2.596-.89 1.41-2.596-2.596L9.6 12.594l2.813 1.41 2.19-2.19zm-2.957 3.332l1.41 1.41L5.376 17.361 2.89 15.796l2.689 2.689zm16.99-5.348l-1.41-1.41 2.49-2.49-1.41-1.41-2.49-2.49L9.6 2.798l-2.81-1.41L11.354 0z"></path>
+                    </svg>
+                 </span>
+                </div>
+              </div>
+              <div class="flex items-center">
+                <input type="text" class="mr-3 form-input w-full appearance-none" placeholder="Enter your prompt..." @focus="open = !open" @blur="open = !open">
+                <div class="bg-gray-500 appearance-none block showed" x-show="open"><button class="btn btn-primary">Generate Story</button></div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div class="flex-1">
+        <div class="object-center mx-auto w-full">
+          <div class="ardinator"></div>
+          <div class="pl-5 pr-10 p-5 lg:w-8/12">
+            <p class="font-body mx-2">Your story will appear here!</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex bottom-0 w-full m-10 p-5 bg-black text-white">
+      <div class="flex-1">
+        <div class="object-contain pull-left overflow-auto p-5 lg:h-64">
+          <svg viewBox="0 0 800 200" width="100%" fill="white" xmlns="http://www.w3.org/2000/svg">
+            <path d="M 0 0 0 150 200 150 200 0 z"></path>
+            <text y="140" x="100" stroke="#FF8040" fill="whitesmoke" font-family="Helvetica" font-size="30" letter-spacing="16" text-anchor="middle">Powered by OpenAI and DaisyUI</text>
+          </svg>
+        </div>
+        <div class="m-10 p-5 bg-black w-3/4">
+          <h1 class="text-indigo-500 font-bold text-xl">Powered by OpenAI and DaisyUI</h1>
+          <p class="font-body mx-2">DaisyUI is powered by OpenAI's GPT-3 which is used to generate the stories based on your prompt. This is just a proof of concept, so please use it responsibly and have fun!</p>
+        </div>
+      </div>
+    </div>
+</body></html>

main.js ADDED Viewed

	@@ -0,0 +1,34 @@

+import { AlpineJS } from 'https://cdn.skypack.dev/alpinejs'
+import { createEditor } from 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js'
+import 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/addons/edit/matchbrackets.min.js'
+import 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/keymap/sublime.min.js'
+import 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/monokai.min.js'
+import 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/twilight.min.js'
+AlpineJS.start()
+const editor = createEditor(document.querySelector('#editor'), {
+ mode: 'xml',
+ lineNumbers: true,
+ styleActiveLine: true,
+ theme: 'twilight',
+ keyMap: 'sublime',
+ matchBrackets: true,
+});
+editor.on('change', () => {
+ let story = editor.getValue()
+ const token = 'aabbccddeeff' // Replace with your own API token
+ const requestOptions = {
+    method: 'POST',
+    mode: "cors",
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ story })
+ };
+ fetch('https://api.openai.com/v1/engines/davinci-codex/completions', requestOptions)
+    .then(response => response.json())
+    .then(data => {
+      const { choices } = data.data.choices
+      console.log(choices)
+    })
+});