Fix style bugs

app.py

@@ -11,6 +11,7 @@ from PIL import (
 )
 
 import re
+import textwrap
 from examples import EXAMPLES
 import meta
 from utils import (
@@ -31,8 +32,10 @@ class TextGeneration:
                 'cover with plastic wrap and microwave on high for 5 minutes.',
                 'remove from the microwave and sprinkle with cheese.',
                 'return to the microwave for 1 minute or until cheese is melted.',
+                'return to the microwave for 1 minute or until cheese is melted. return to the microwave for 1 minute or until cheese is melted.'
+                'return to the microwave for 1 minute or until cheese is melted.',
+                'return to the microwave for 1 minute or until cheese is melted.',
                 'return to the microwave for 1 minute or until cheese is melted.',
-                'return to the microwave for 1 minute or until cheese is melted.'
             ],
             'ingredients': [
                 '1 potato',
@@ -53,6 +56,8 @@ class TextGeneration:
         self.generator = None
         self.task = "text2text-generation"
         self.model_name_or_path = "flax-community/t5-recipe-generation"
+        self.list_division = 5
+        self.point = "-"
         self.h1_font = ImageFont.truetype("asset/fonts/PT_Serif/PTSerif-Bold.ttf", 100)
         self.h2_font = ImageFont.truetype("asset/fonts/PT_Serif/PTSerif-Bold.ttf", 50)
         self.p_font = ImageFont.truetype("asset/fonts/PT_Serif/PTSerif-Regular.ttf", 30)
@@ -100,7 +105,7 @@ class TextGeneration:
             font=self.h1_font,
         )
         # Ingredients
-        hs = hs + 200
+        hs = hs + 250
         im_editable.text(
             (ws, hs),
             "Ingredients",
@@ -108,9 +113,19 @@ class TextGeneration:
             font=self.h2_font,
         )
         hs = hs + 80
+        ingredients = recipe["ingredients"]
+        ingredients_col1 = [textwrap.fill(item, 30) for item in ingredients[:self.list_division]]
+        ingredients_col2 = [textwrap.fill(item, 30) for item in ingredients[self.list_division:]]
+
         im_editable.text(
             (ws + 10, hs),
-            "\n".join([f"- {item}" for item in recipe["ingredients"]]),
+            "\n".join([f"- {item}" for item in ingredients_col1]),
+            (61, 61, 70),
+            font=self.p_font,
+        )
+        im_editable.text(
+            (ws + 500, hs),
+            "\n".join([f"{self.point} {item}" for item in ingredients_col2]),
             (61, 61, 70),
             font=self.p_font,
         )
@@ -123,9 +138,10 @@ class TextGeneration:
             font=self.h2_font,
         )
         hs = hs + 80
+        directions = [textwrap.fill(item, 70).replace("\n", "\n   ") for item in recipe["directions"]]
         im_editable.text(
             (ws + 10, hs),
-            "\n".join([f"- {item}" for item in recipe["directions"]]),
+            "\n".join([f"{self.point} {item}" for item in directions]),
             (61, 61, 70),
             font=self.p_font,
         )
@@ -192,8 +208,18 @@ def main():
     local_css("asset/css/style.css")
 
     st.sidebar.image(load_image("asset/images/chef-transformer-transparent.png"), width=310)
-    st.sidebar.title("Choose your own chef")
-    chef = st.sidebar.selectbox("Chef", index=0, options=["Chef Scheherazade", "Chef Giovanni"])
+    st.sidebar.title("Welcome to our lovely restaurant, what can I do for you?")
+    chef = st.sidebar.selectbox("Choose your chef", index=0, options=["Chef Scheherazade", "Chef Giovanni"])
+    is_text = st.sidebar.selectbox(
+        label='Recipe',
+        options=(True, False),
+        help="Will generate your recipe as a text post",
+    )
+    is_frame = st.sidebar.selectbox(
+        label='Recipe for Instagram?',
+        options=(True, False),
+        help="Will generate your recipe as an Instagram post",
+    )
 
     st.markdown(meta.HEADER_INFO)
     prompts = list(EXAMPLES.keys()) + ["Custom"]
@@ -215,26 +241,48 @@ def main():
     if st.button('Get Recipe!'):
         entered_items.markdown("**Generate recipe for:** " + items)
         with st.spinner("Generating recipe..."):
-
             gen_kw = chef_top if chef == "Chef Scheherazade" else chef_beam
             generated_recipe = generator.generate(items, gen_kw)
-            recipe_post = generator.generate_frame(generated_recipe)
-
-            col1, col2, col3 = st.beta_columns([1, 6, 1])
-            with col1:
-                st.write("")
-
-            with col2:
-                st.image(
-                    recipe_post,
-                    # width=500,
-                    caption="Your recipe",
-                    use_column_width="auto",
-                    output_format="PNG"
-                )
 
-            with col3:
-                st.write("")
+            if generated_recipe:
+                if is_text:
+                    title = generated_recipe["title"]
+                    ingredients = generated_recipe["ingredients"]
+                    directions = [textwrap.fill(item, 70).replace("\n", "\n   ") for item in
+                                  generated_recipe["directions"]]
+                    st.markdown(
+                        " ".join([
+                            f"<h2>{title}</h2>",
+                            "<h3>Ingredient</h3>",
+                            "<ul class='ingredients-list'>",
+                            " ".join([f'<li>{item}</li>' for item in ingredients]),
+                            "</ul>",
+                            "<h3>Direction</h3>",
+                            "<ul class='ingredients-list'>",
+                            " ".join([f'<li>{item}</li>' for item in directions]),
+                            "</ul>",
+                        ]),
+                        unsafe_allow_html=True
+                    )
+
+                if is_frame:
+                    recipe_post = generator.generate_frame(generated_recipe)
+
+                    col1, col2, col3 = st.beta_columns([1, 6, 1])
+                    with col1:
+                        st.write("")
+
+                    with col2:
+                        st.image(
+                            recipe_post,
+                            # width=500,
+                            caption="Your recipe",
+                            use_column_width="auto",
+                            output_format="PNG"
+                        )
+
+                    with col3:
+                        st.write("")
 
 
 if __name__ == '__main__':

asset/css/style.css

@@ -5,4 +5,10 @@ body {
 .fullScreenFrame > div {
     display: flex;
     justify-content: center;
+}
+
+.ingredients-list {
+    columns: 2;
+    -webkit-columns: 2;
+    -moz-columns: 2;
 }