Upgrade the UI-UX

app.py

@@ -10,7 +10,11 @@ from PIL import (
     ImageDraw
 )
 
+import numpy as np
+from datetime import datetime
+import glob
 import re
+import random
 import textwrap
 from examples import EXAMPLES
 import meta
@@ -21,6 +25,8 @@ from utils import (
     pure_comma_separation
 )
 
+np.random.seed(42)
+
 
 class TextGeneration:
     def __init__(self):
@@ -39,8 +45,8 @@ class TextGeneration:
             ],
             'ingredients': [
                 '1 potato',
-                '1 slice cheese',
-                '1 potato',
+                '1 slice cheese 1 slice cheese',
+                '1 potato 1 slice cheese 1 slice cheese',
                 '1 slice cheese'
                 '1 potato',
                 '1 slice cheese',
@@ -56,11 +62,16 @@ class TextGeneration:
         self.generator = None
         self.task = "text2text-generation"
         self.model_name_or_path = "flax-community/t5-recipe-generation"
+        self.frames = list(glob.glob("asset/images/frames/*.jpg"))
+        self.fonts = {
+            "title": ImageFont.truetype("asset/fonts/Poppins-Bold.ttf", 90),
+            "sub_title": ImageFont.truetype("asset/fonts/Poppins-Medium.ttf", 30),
+            "body_bold": ImageFont.truetype("asset/fonts/Montserrat-Bold.ttf", 50),
+            "body": ImageFont.truetype("asset/fonts/Montserrat-Regular.ttf", 30),
+
+        }
         self.list_division = 5
         self.point = "-"
-        self.h1_font = ImageFont.truetype("asset/fonts/PT_Serif/PTSerif-Bold.ttf", 75)
-        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)
         set_seed(42)
 
     def _skip_special_tokens_and_prettify(self, text):
@@ -96,59 +107,67 @@ class TextGeneration:
 
     def prepare_frame(self, recipe, frame):
         im_editable = ImageDraw.Draw(frame)
+        # Info
+        im_editable.text(
+            (1570, 180),
+            datetime.now().strftime("%Y-%m-%d %H:%M"),
+            (61, 61, 70),
+            font=self.fonts["sub_title"],
+        )
+        im_editable.text(
+            (1570, 170 + 70),
+            "By " + recipe["by"],
+            (61, 61, 70),
+            font=self.fonts["sub_title"],
+        )
         # Title
-        ws, hs = 120, 500
         im_editable.text(
-            (ws, hs),
-            textwrap.fill(recipe["title"], 25),
+            (400, 650),
+            textwrap.fill(recipe["title"], 30),
             (61, 61, 70),
-            font=self.h1_font,
+            font=self.fonts["title"],
         )
         # Ingredients
-        hs = hs + 270
         im_editable.text(
-            (ws, hs),
+            (100, 1050),
             "Ingredients",
             (61, 61, 70),
-            font=self.h2_font,
+            font=self.fonts["body_bold"],
         )
-        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:]]
+        ingredients = [textwrap.fill(item, 30).replace("\n", "\n   ") for item in ingredients]
 
         im_editable.text(
-            (ws + 10, hs),
-            "\n".join([f"- {item}" for item in ingredients_col1]),
+            (100, 1130),
+            "\n".join([f"{self.point} {item}" for item in ingredients]),
             (61, 61, 70),
-            font=self.p_font,
+            font=self.fonts["body"],
         )
+        # Directions
         im_editable.text(
-            (ws + 500, hs),
-            "\n".join([f"{self.point} {item}" for item in ingredients_col2]),
+            (700, 1050),
+            "Directions",
             (61, 61, 70),
-            font=self.p_font,
+            font=self.fonts["body_bold"],
         )
-        # Directions
-        hs = hs + 240
+        directions = recipe["directions"]
+        directions_col1 = [textwrap.fill(item, 30).replace("\n", "\n   ") for item in directions[:self.list_division]]
+        directions_col2 = [textwrap.fill(item, 30).replace("\n", "\n   ") for item in directions[self.list_division:]]
         im_editable.text(
-            (ws, hs),
-            "Directions",
+            (700, 1130),
+            "\n".join([f"{i + 1}. {item}" for i, item in enumerate(directions_col1)]).strip(),
             (61, 61, 70),
-            font=self.h2_font,
+            font=self.fonts["body"],
         )
-        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"{self.point} {item}" for item in directions]),
+            (1300, 1130),
+            "\n".join([f"{i + 1 + self.list_division}. {item}" for i, item in enumerate(directions_col2)]).strip(),
             (61, 61, 70),
-            font=self.p_font,
+            font=self.fonts["body"],
         )
         return frame
 
     def generate(self, items, generation_kwargs):
-        print(generation_kwargs)
         if not self.debug:
             generation_kwargs["num_return_sequences"] = 1
             # generation_kwargs["return_full_text"] = False
@@ -165,8 +184,8 @@ class TextGeneration:
 
         return self.dummy_output
 
-    def generate_frame(self, recipe):
-        frame = load_image("asset/images/recipe-post.png")
+    def generate_frame(self, recipe, frame_path):
+        frame = load_image(frame_path)
         return self.prepare_frame(recipe, frame)
 
 
@@ -205,54 +224,87 @@ def main():
         initial_sidebar_state="expanded"
     )
     generator = load_text_generator()
+    if 'get_random_frame' not in st.session_state:
+        st.session_state.get_random_frame = generator.frames[0]
+
     local_css("asset/css/style.css")
 
-    st.sidebar.image(load_image("asset/images/chef-transformer-transparent.png"), width=310)
-    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",
-    )
+    col1, col2 = st.beta_columns([5, 3])
+    with col2:
+        st.image(load_image("asset/images/chef-transformer-transparent.png"), width=300)
+        st.markdown(meta.SIDEBAR_INFO, unsafe_allow_html=True)
+
+        with st.beta_expander("Where did this story start?"):
+            st.markdown(meta.STORY, unsafe_allow_html=True)
+
+    with col1:
+        st.markdown(meta.HEADER_INFO, unsafe_allow_html=True)
+
+        st.markdown(meta.CHEF_INFO, unsafe_allow_html=True)
+        chef = st.selectbox("Choose your chef", index=0, options=["Chef Scheherazade", "Chef Giovanni"])
 
-    st.markdown(meta.HEADER_INFO)
-    prompts = list(EXAMPLES.keys()) + ["Custom"]
-    prompt = st.selectbox('Examples', prompts, index=len(prompts) - 1)
+        prompts = list(EXAMPLES.keys()) + ["Custom"]
+        prompt = st.selectbox(
+            'Examples (select from this list)',
+            prompts,
+            # index=len(prompts) - 1,
+            index=0
+        )
 
-    if prompt == "Custom":
-        prompt_box = ""
-    else:
-        prompt_box = EXAMPLES[prompt]
+        if prompt == "Custom":
+            prompt_box = ""
+        else:
+            prompt_box = EXAMPLES[prompt]
 
-    items = st.text_input(
-        'Add custom ingredients here (separated by `,`): ',
-        pure_comma_separation(prompt_box, return_list=False),
-        key="custom_keywords",
-        max_chars=1000)
-    items = pure_comma_separation(items, return_list=False)
-    entered_items = st.empty()
+        items = st.text_area(
+            'Insert your ingredients here (separated by `,`): ',
+            pure_comma_separation(prompt_box, return_list=False),
+        )
+        items = pure_comma_separation(items, return_list=False)
+        entered_items = st.empty()
+        recipe_button = st.button('Get Recipe!')
 
-    if st.button('Get Recipe!'):
+    st.markdown(
+        "<hr />",
+        unsafe_allow_html=True
+    )
+    if recipe_button:
+        st.session_state.get_random_frame = generator.frames[random.randint(0, len(generator.frames)) - 1]
         entered_items.markdown("**Generate recipe for:** " + items)
         with st.spinner("Generating recipe..."):
 
-            if isinstance(items, str) and len(items) > 1:
+            if not isinstance(items, str) or not len(items) > 1:
+                entered_items.markdown(
+                    f"**{chef}** would like to know what ingredients do you like to use in "
+                    f"your food? "
+                )
+            else:
                 gen_kw = chef_top if chef == "Chef Scheherazade" else chef_beam
                 generated_recipe = generator.generate(items, gen_kw)
 
-                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"]]
+                title = generated_recipe["title"]
+                ingredients = generated_recipe["ingredients"]
+                directions = [textwrap.fill(item, 70).replace("\n", "\n   ") for item in
+                              generated_recipe["directions"]]
+                generated_recipe["by"] = chef
+
+                r1, r2 = st.beta_columns([3, 5])
+
+                with r1:
+                    # st.write(st.session_state.get_random_frame)
+                    recipe_post = generator.generate_frame(generated_recipe, st.session_state.get_random_frame)
+                    st.image(
+                        recipe_post,
+                        # width=500,
+                        caption="Click 🔎 to enlarge",
+                        use_column_width="auto",
+                        output_format="PNG"
+                    )
+
+                with r2:
                     st.markdown(
                         " ".join([
+                            "<div class='r-text-recipe'>",
                             f"<h2>{title}</h2>",
                             "<h3>Ingredient</h3>",
                             "<ul class='ingredients-list'>",
@@ -262,31 +314,11 @@ def main():
                             "<ul class='ingredients-list'>",
                             " ".join([f'<li>{item}</li>' for item in directions]),
                             "</ul>",
+                            "</div>"
                         ]),
                         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("")
-            else:
-                entered_items.markdown("Enter your items...")
-
 
 if __name__ == '__main__':
     main()

asset/css/style.css

@@ -1,14 +1,51 @@
 body {
-    background-color: #eee;
+    background-color: #fff;
 }
 
+
 .fullScreenFrame > div {
     display: flex;
     justify-content: center;
 }
+.comma:not(:empty) ~ .comma:not(:empty):before {
+  content: " , ";
+}
+.strong {
+    font-weight: bold;
+}
+.d-block {
+    display: block;
+}
+.extra-info {
+    font-weight: normal;
+    font-style: italic;
+    font-size: small;
+}
+
+.contributors {
+    margin-bottom: 10px;
+    border-bottom: 1px solid #f3f3f3;
+    padding-bottom: 10px;
+}
+.contributors a.contributor {
+    text-decoration: none;
+    color: #9b9dad;
+}
+.contributors a.contributor:hover {
+    text-decoration: underline;
+}
 
+.r-text-recipe {
+    padding-left: 30px;
+    margin-left: 10px;
+    border-left: 1px dashed #eee;
+}
+.r-text-recipe > h2 {
+    margin-top: 0;
+    padding-top: 0;
+}
 .ingredients-list {
     columns: 2;
     -webkit-columns: 2;
     -moz-columns: 2;
-}
+}

asset/fonts/PT_Serif/OFL.txt

@@ -1,94 +0,0 @@
-Copyright (c) 2010, ParaType Ltd. (http://www.paratype.com/public),
-with Reserved Font Names "PT Sans", "PT Serif" and "ParaType".
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

meta.py

@@ -1,10 +1,41 @@
-HEADER_INFO = """
-# Chef Transformer 🍲
-
-This demo uses [T5 trained on RecipeNLG](https://huggingface.co/flax-community/t5-recipe-generation)
-to generate recipe from a given set of ingredients
-""".strip()
+HEADER_INFO = """""".strip()
 SIDEBAR_INFO = """
-# Configuration
+<div class="contributors">
+<a class="contributor comma" href="https://huggingface.co/m3hrdadfi">Mehrdad Farahani</a>
+<a class="contributor comma" href="https://huggingface.co/dk-crazydiv">Kartik Godawat</a>
+<a class="contributor comma" href="https://huggingface.co/hassiahk">Haswanth Aekula</a>
+<a class="contributor comma" href="https://huggingface.co/rays2pix">Deepak Pandian</a>
+<a class="contributor comma" href="https://huggingface.co/nbroad">Nicholas Broad</a>
+</div>
+"""
+CHEF_INFO = """
+<p class="strong">Welcome to our lovely restaurant! 
+<span class="d-block extra-info">(We are at your service with two of our best chefs in the world, Chef Scheherazade, 
+Chef Giovanni.)</span></p>
 """.strip()
 PROMPT_BOX = "Add custom ingredients here (separated by `,`): "
+STORY = """
+Hello everyone, I am **Chef Transformer**, the owner of this restaurant and headmaster of two other chefs **Scheherazade**, and **Giovanni**. 
+In fact, to be more precise, I was made by a group of [NLP Engineers](
+https://huggingface.co/flax-community/t5-recipe-generation#team-members) so that to get your raw 
+materials and with the help of my other associates (Scheherazade, and Giovanni) which participated in [T5 fine-tuning program (chef program)](https://huggingface.co/flax-community/t5-recipe-generation) be able to prepare food recipes for you. 
+Before going any further, highly important to mention both cooks are capable, except that Scheherazade is *creative* 
+while Giovanni is *meticulous*.
+
+At first, it was hard, and we had to read cookbooks to learn, whereas the books somehow consist of trivial recipes, but engineers helped us focus on essential parts of recipes for specific food items. 
+Also, they taught us to consider the food items (known as NER), ingredients, directions, and, more importantly, food names and then map them in the following form in our skills and histories.
+
+```text
+[Input]
+    {NER: separated by comma}
+     
+[Targets]
+    title: {TITLE} <section> 
+    ingredients: {INGREDIENTS: separated by <sep>} <section> 
+    directions: {DIRECTIONS: separated by <sep>}.
+```
+
+It was a challenging week, but we learned a lot, to be honest. Finally, we graduated with [high scores](
+https://huggingface.co/flax-community/t5-recipe-generation#evaluation) in our 
+classroom and established this restaurant. Do not forget to introduce us to others.
+""".strip()