prototype-generator

Runtime error

App Files Files Community

saicharantej commited on Jul 7, 2024

Commit

8de1fb8

verified ·

1 Parent(s): 95e0e2a

Update app.py

Browse files

Files changed (1) hide show

app.py +78 -9

app.py CHANGED Viewed

@@ -21,19 +21,88 @@ def cohere_response(msg):
         print(event.text, end='')
   return output
-def generate_mockup(problem):
-  prompt_sum = f'''You are a UX designer who is an expert in generating front-end code for a given requirement from a product manager: {problem}.
-  You need to carefully understand the requirement and generate the HTML code for a series of mockups that together form a clickable prototype.
-  You can use Bootstrap and popularly available visual libraries to generate the code.Each screen should be clearly delimited by the header - Screen 1, Screen 2, Screen 3, etc. Do not generate placeholders and always make assumptions that make the generated
-  mockups useful to solve real-world problems. Each mockup should link to the next, creating a seamless user experience. The prototype should be visually appealing and
-  satisfy the requirement as a mockup. You are supposed to just generate the HTML code and nothing else as output.'''
   response = cohere_response(prompt_sum)
   return response
 # Define a function to handle form submissions (this is just a placeholder)
 def handle_form(requirements):
     print(requirements)
-    emp_content = generate_mockup(requirements)
     #final_html_content = extract_html(emp_content)
     return emp_content, emp_content
@@ -42,7 +111,7 @@ gr.Interface(
     fn=handle_form,
     inputs=gr.Textbox(),
     outputs=[gr.HTML(),gr.Textbox()],
-    title="Mockup Generator",
-    description="Generate a mockup for a given requirement",
     examples=["Design an interface for a food delivery app payment checkout screen, a menu with categories like 'Asian Cuisine' and 'Italian Pasta', and a user profile section.","Generate a newsletter template for a tech company with sections for latest news, featured products, and upcoming events."],
 ).launch()

         print(event.text, end='')
   return output
+def generate_prototype(problem):
+  prompt_sum = f'''You are a UX designer who is an expert in generating front-end code for a given requirement from a product manager: {problem}. Follow these step-by-step instructions to create a series of mockups that form a clickable prototype:
+Understand the Requirement: Carefully read and understand the requirement provided by the product manager.
+Identify Personas: Identify the personas outlined in the input problem. For example, if the requirement is for an e-commerce website, personas could include:
+Shopper
+Seller
+Administrator
+Generate Critical User Journeys (CUJs): For each persona, generate Critical User Journeys. For example:
+Shopper: Searching for a product, adding a product to the cart, checking out.
+Seller: Listing a product, managing inventory, viewing sales reports.
+Administrator: Managing users, handling transactions, viewing site analytics.
+Create Screens: Based on the CUJs, create the corresponding screens. For each screen, write HTML code that includes the header with the screen number and the CUJ it caters to. Ensure each screen links to the next to form a clickable prototype.
+Use Bootstrap and Visual Libraries: Utilize Bootstrap and other popular visual libraries to enhance the design and functionality of the mockups.
+Avoid Placeholders: Do not use placeholders. Instead, assume real-world use cases to make the mockups useful and realistic.
+Ensure Visual Appeal: The mockups should be visually appealing and user-friendly.
+Output HTML Code Only: Generate only the HTML code for the mockups, nothing else.
+Example
+Screen 1: Searching for a product (Shopper)
+html
+Copy code
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Screen 1: Searching for a product (Shopper)</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Search for a Product</h1>
+        <form>
+            <div class="form-group">
+                <label for="search">Search</label>
+                <input type="text" class="form-control" id="search" placeholder="Enter product name">
+            </div>
+            <button type="submit" class="btn btn-primary">Search</button>
+        </form>
+        <a href="screen2.html" class="btn btn-link">Next: Adding a product to the cart</a>
+    </div>
+</body>
+</html>
+Screen 2: Adding a product to the cart (Shopper)
+html
+Copy code
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Screen 2: Adding a product to the cart (Shopper)</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Product Details</h1>
+        <p>Product Name: Awesome Widget</p>
+        <p>Price: $19.99</p>
+        <button class="btn btn-success">Add to Cart</button>
+        <a href="screen3.html" class="btn btn-link">Next: Checking out</a>
+    </div>
+</body>
+</html>
+Follow this structure for each screen and CUJ, ensuring a seamless and visually appealing user experience.'''
   response = cohere_response(prompt_sum)
   return response
 # Define a function to handle form submissions (this is just a placeholder)
 def handle_form(requirements):
     print(requirements)
+    emp_content = generate_prototype(requirements)
     #final_html_content = extract_html(emp_content)
     return emp_content, emp_content
     fn=handle_form,
     inputs=gr.Textbox(),
     outputs=[gr.HTML(),gr.Textbox()],
+    title="Prototype generator",
+    description="Generate a prototype for a given requirement",
     examples=["Design an interface for a food delivery app payment checkout screen, a menu with categories like 'Asian Cuisine' and 'Italian Pasta', and a user profile section.","Generate a newsletter template for a tech company with sections for latest news, featured products, and upcoming events."],
 ).launch()