Upload 15 files

App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

App.js

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import Layout from "./Layout";
+import Landing from "./Landing";
+import './App.css';
+
+export default function App() {
+  const [selectedPrompt, setSelectedPrompt] = useState("");
+
+  return (
+    <Layout onPromptSelect={setSelectedPrompt}>
+      <Landing initialPrompt={selectedPrompt} />
+    </Layout>
+  );
+}
+

App.test.js

@@ -0,0 +1,13 @@
+import React, { useState } from "react";
+import Layout from "./Layout";
+import Landing from "./Landing";
+
+export default function App() {
+  const [selectedPrompt, setSelectedPrompt] = useState("");
+
+  return (
+    <Layout onPromptSelect={setSelectedPrompt}>
+      <Landing initialPrompt={selectedPrompt} />
+    </Layout>
+  );
+}

ExamplePrompts.css

@@ -0,0 +1,64 @@
+.example-prompts-box {
+  background-color: #2a2c37;
+  border: 1.5px solid #565867;
+  border-radius: 8px;
+  padding: 15px 20px;
+  margin-bottom: 20px;
+  max-width: 700px;
+  color: #e5e5e5;
+  font-family: Arial, sans-serif;
+}
+
+.example-prompts-box h3 {
+  margin-top: 0;
+  margin-bottom: 12px;
+  color: #5671f5;
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.example-prompts-box ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.example-prompts-box li {
+  cursor: pointer;
+  padding: 8px 10px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  transition: background-color 0.2s ease;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.example-prompts-box li:hover,
+.example-prompts-box li:focus {
+  background-color: #5671f5;
+  color: white;
+  outline: none;
+}
+.example-prompts-box li {
+  cursor: pointer;
+  padding: 12px 14px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  background-color: #2f3240; 
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); 
+  transition: background-color 0.2s ease, box-shadow 0.3s ease;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #e5e5e5;
+}
+
+.example-prompts-box li:hover,
+.example-prompts-box li:focus {
+  background-color: #5671f5;
+  color: white;
+  box-shadow:
+    0 4px 12px rgba(86, 113, 245, 0.7),
+    inset 0 0 6px 2px rgba(255, 255, 255, 0.2);
+  outline: none;
+}
+

ExamplePrompts.js

@@ -0,0 +1,19 @@
+import React from "react";
+import "./ExamplePrompts.css";
+
+export default function ExamplePrompts({ prompts, onSelect }) {
+  return (
+    <div className="example-prompts-box">
+      <h3>Example Prompts</h3>
+      <ul>
+        {prompts.map((prompt, i) => (
+          <li key={i} onClick={() => onSelect(prompt)} tabIndex={0} onKeyDown={e => {
+            if(e.key === 'Enter' || e.key === ' ') onSelect(prompt);
+          }}>
+            {prompt}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

Landing.css

@@ -0,0 +1,76 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  padding: 40px 20px;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+  color: #e5e5e5;
+  background-color: #202123;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: auto;
+}
+
+.content {
+  max-width: 700px;
+  width: 100%;
+}
+
+.heading {
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.description {
+  margin-bottom: 20px;
+  line-height: 1.5;
+  color: #ccc;
+  text-align: center;
+}
+
+.textarea {
+  width: 100%;
+  padding: 12px;
+  border-radius: 6px;
+  border: 1.5px solid #565867;
+  background-color: #40414f;
+  color: #e5e5e5;
+  font-size: 16px;
+  margin-bottom: 20px;
+  resize: vertical;
+  font-family: inherit;
+}
+
+.button {
+  background-color: #5671f5;
+  border: none;
+  border-radius: 6px;
+  padding: 14px 0;
+  width: 100%;
+  color: white;
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+  margin-bottom: 20px;
+  transition: background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #3753d4;
+}
+
+.output {
+  background-color: #343541;
+  border-radius: 6px;
+  padding: 18px;
+  height: 250px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  color: #e5e5e5;
+  border: 1.5px solid #565867;
+  box-shadow: inset 0 0 8px #1c1c1f;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 15px;
+}

Landing.js

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+import ExamplePrompts from "./ExamplePrompts";
+import "./Landing.css";
+
+const examplePromptsList = [
+  "Write a romantic comedy set in New York.",
+  "Generate a thriller about a detective chasing a serial killer.",
+  "Create a sci-fi scene on a distant planet.",
+  "Write a dialogue between two estranged siblings.",
+  "Outline a fantasy adventure with dragons and magic.",
+];
+
+export default function Landing({ initialPrompt }) {
+  const [prompt, setPrompt] = useState(initialPrompt || "");
+  const [output, setOutput] = useState(
+    "Your screenplay output will appear here..."
+  );
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (initialPrompt) setPrompt(initialPrompt);
+  }, [initialPrompt]);
+
+  async function generate() {
+    setLoading(true);
+    setOutput("Generating screenplay...");
+    try {
+      const response = await fetch("http://localhost:8000/generate-story", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ user_input: prompt }),
+      });
+      if (!response.ok) {
+        throw new Error("Backend error: " + response.status);
+      }
+      const data = await response.json();
+      setOutput(
+        `Genre: ${data.genre || ''}\n` +
+        `Tone: ${data.tone || ''}\n\n` +
+        `Outline:\n${data.outline || ''}\n\n` +
+        `Scene:\n${data.scene || ''}\n\n` +
+        `Dialogue:\n${data.dialogue || ''}`
+      );
+    } catch (error) {
+      setOutput("Error generating screenplay: " + error.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="container">
+      <div className="content">
+        <h1 className="heading">Screenplay Generator</h1>
+        <p className="description">
+          Simply provide a brief prompt, and this AI will craft a complete screenplay tailored to your idea — seamlessly weaving together the genre, plot outline, character development, and dialogue to bring your story to life.
+        </p>
+
+        {/* Example prompts box */}
+        <ExamplePrompts prompts={examplePromptsList} onSelect={setPrompt} />
+
+        <textarea
+          className="textarea"
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Enter your prompt here..."
+          rows={6}
+        />
+
+        <button className="button" onClick={generate} disabled={loading}>
+          {loading ? "Generating..." : "Generate Screenplay"}
+        </button>
+
+        <pre className="output" style={{ whiteSpace: 'pre-wrap' }}>{output}</pre>
+      </div>
+    </div>
+  );
+}

Layout.css

@@ -0,0 +1,52 @@
+.layout-container {
+  display: flex;
+  height: 100vh;
+  background-color: #202123;
+  color: #e5e5e5;
+  font-family: Arial, sans-serif;
+}
+
+.sidebar {
+  width: 320px;
+  background-color: #2a2c37;
+  padding: 20px;
+  box-sizing: border-box;
+  border-right: 1px solid #565867;
+  overflow-y: auto;
+}
+
+.sidebar h2 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-weight: 700;
+  font-size: 20px;
+  color: #5671f5;
+}
+
+.sidebar ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sidebar li {
+  cursor: pointer;
+  margin-bottom: 12px;
+  padding: 10px;
+  border-radius: 6px;
+  transition: background-color 0.2s ease;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.sidebar li:hover {
+  background-color: #5671f5;
+  color: white;
+}
+
+.main-content {
+  flex-grow: 1;
+  padding: 40px 30px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}

Layout.js

@@ -0,0 +1,29 @@
+import React from "react";
+import "./Layout.css";
+
+export default function Layout({ children, onPromptSelect }) {
+  const examplePrompts = [
+    "Provide a simple idea, and the AI will generate a full screenplay — from genre to characters and dialogue — tailored just for you.",
+    "Type a concept or theme, and watch as the AI builds a complete screenplay with plot, scenes, characters, and conversations.",
+    "Enter a short prompt, and this AI crafts an engaging screenplay by designing the story’s genre, plot, characters, and dialogue automatically.",
+    "Give your story idea, and the AI will write a polished screenplay including genre, storyline, character arcs, and authentic dialogue.",
+    "Share a brief prompt and let the AI transform it into a full screenplay, developing the plot, characters, genre, and conversations effortlessly.",
+  ];
+
+  return (
+    <div className="layout-container">
+      <aside className="sidebar">
+        <h2>Example Prompts</h2>
+        <ul>
+          {examplePrompts.map((prompt, idx) => (
+            <li key={idx} onClick={() => onPromptSelect(prompt)}>
+              {prompt}
+            </li>
+          ))}
+        </ul>
+      </aside>
+
+      <main className="main-content">{children}</main>
+    </div>
+  );
+}

StoryGenerator.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+
+function StoryGenerator() {
+  const [input, setInput] = useState("");
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    const response = await fetch("http://localhost:8000/generate-story", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ user_input: input }),
+    });
+    const data = await response.json();
+    setResult(data);
+    setLoading(false);
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Enter your story idea"
+        />
+        <button type="submit">Generate Story</button>
+      </form>
+      {loading && <p>Generating...</p>}
+      {result && (
+        <div>
+          <h3>Genre: {result.genre}</h3>
+          <h3>Tone: {result.tone}</h3>
+          <h4>Outline:</h4>
+          <pre>{result.outline}</pre>
+          <h4>Scene:</h4>
+          <pre>{result.scene}</pre>
+          <h4>Dialogue:</h4>
+          <pre>{result.dialogue}</pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default StoryGenerator;

index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';