Dynamic formatting

Implementation of dynamic html/css formatting for outputs
openai · Aug 16, 2023 · 3539133 · 3539133
1 parent b8abc54
commit 3539133
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 27 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/app.py b/app.py
@@ -35,21 +35,21 @@ def index():
  return render_template("index.html", result=result)
 
 
-def generate_prompt(animal):
- return """Suggest three names for an animal that is a superhero.
-
-Animal: Cat
-Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
-Animal: Dog
-Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
-Animal: {}
-Names:""".format(
- animal.capitalize()
- )
-
-def gen_article(keywords, audience, length):
- return """"You are a helpful writing assistant. You will be given a handful of keywords, 
- a target audience, and an article length. Please write the article to be Search Engine Optimized."
-""".format(
- audience.capitalize()
- )
+# def generate_prompt(animal):
+#  return """Suggest three names for an animal that is a superhero.
+#
+# Animal: Cat
+# Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
+# Animal: Dog
+# Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
+# Animal: {}
+# Names:""".format(
+#  animal.capitalize()
+#  )
+#
+# def gen_article(keywords, audience, length):
+#  return """"You are a helpful writing assistant. You will be given a handful of keywords,
+#  a target audience, and an article length. Please write the article to be Search Engine Optimized."
+# """.format(
+#  audience.capitalize()
+#  )
diff --git a/static/main.css b/static/main.css
@@ -36,6 +36,14 @@ h3 {
  color: #202123;
  margin: 16px 0 40px;
 }
+h2 {
+ font-size: 32px;
+ line-height: 40px;
+ display: flex;
+ font-weight: bold;
+ color: #202123;
+ margin: 16px 0 20px;
+}
 form {
  display: flex;
  flex-direction: column;

diff --git a/templates/index.html b/templates/index.html
@@ -1,25 +1,52 @@
 <!DOCTYPE html>
 <head>
- <title>OpenAI Quickstart</title>
+ <title>SEO Article Generator</title>
+ <style>
+ h2 {
+ font-size: 24px;
+ color: #333;
+ margin-top: 20px;
+ }
+ p {
+ font-size: 18px;
+ color: #666;
+ margin: 10px 0;
+ }
+ </style>
  <link
  rel="shortcut icon"
  href="{{ url_for('static', filename='dog.png') }}"
  />
  <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}" />
 </head>
-
 <body>
- <img src="{{ url_for('static', filename='dog.png') }}" class="icon" />
- <h3>Write My SEO Optimized Article</h3>
- <form action="/" method="post">
+  <h1>SEO Article Generator</h1>
+  <form method="POST">
+  <form action="/" method="post">
 
  <input type="text" name="keywords" placeholder="Enter one or more keywords" required />
  <input type="text" name="audience" placeholder="Enter a target audience" required />
  <input type="text" name="length" placeholder="Enter an article length" required />
 
  <input type="submit" value="Generate Article" />
  </form>
- {% if result %}
- <div class="result">{{ result }}</div>
- {% endif %}
+
+ {% if result %}
+
+ <div class="article">
+ <div><h4>SEO Optimized Article</h4></div>
+
+ <!-- Split the result into paragraphs -->
+ {% for paragraph in result.split('\n\n') %}
+ {% if loop.index == 1 %}
+ <h2>{{ paragraph }}</h2>
+ {% else %}
+ <p>{{ paragraph }}</p>
+ {% endif %}
+ {% endfor %}
+ </div>
+ {% endif %}
 </body>
+
+
+