Update app styling

app.py

@@ -1,92 +1,165 @@
-# all the imports
+# app.py
 from transformers import pipeline
 import gradio as gr
 import torch
 import re
 
-#---------------------------------------------------------------------------------
-# function modified for the demo
-def get_native_feature_demo(language, input_description, target_feature, question, return_numbers = True):
+def get_native_feature_demo(language, input_description, target_feature, question, return_numbers=True):
     task = 'question-answering'
     french_model = 'AgentPublic/camembert-base-squadFR-fquad-piaf'
     english_model = 'deepset/roberta-base-squad2'
+    
     if language == "French":
         model = pipeline(task, model=french_model, tokenizer=french_model)
     else:
         model = pipeline(task, model=english_model, tokenizer=english_model)
+    
     answer = model({
         'question': question,
         'context': input_description
     })
+    
     if target_feature == "price":
-        # price median
         reference_target_value = 1650
     else:
-        # living space median
         reference_target_value = 85
+        
     try:
         if return_numbers:
-            nums = re.findall(r"\d*\.\d+|\d+\,\d+|\d{1,3}'[\d{3}']+\d{1,3}\.?\d*|(?<!m)\d+",answer['answer'])
-            nums = [re.sub("\,|\'", "", num) for num in nums]
-            # turn every number into float
+            nums = re.findall(r"\d*\.\d+|\d+\,\d+|\d{1,3}'[\d{3}']+\d{1,3}\.?\d*|(?<!m)\d+", answer['answer'])
+            nums = [re.sub(r",|'", "", num) for num in nums]  # Fixed escape sequence
             if len(nums) > 1:
                 nums = [float(x) for x in nums]
                 answer_processed = min(nums, key=lambda x:abs(x-reference_target_value))
             elif len(nums) == 1:
                 answer_processed = float(''.join(nums))
+            else:
+                return "No numbers found!", None, None
         else:
-            answer = answer['answer']
-        answer_processed = round(answer_processed, 2)
+            answer_processed = answer['answer']
+            
+        answer_processed = round(float(answer_processed), 2)
         answer_full = answer['answer']
         score = answer['score']
-        return ('%f' % answer_processed).rstrip('0').rstrip('.'), score, answer_full
+        return ('%f' % answer_processed).rstrip('0').rstrip('.'), f"{score:.4f}", answer_full
     except:
         return "No answer!", None, None
 
-#---------------------------------------------------------------------------------
-# define the parameters
+# Example data
+french_example = """ Venez découvrir votre futur appartement lors des portes ouvertes Quai Ouest à Renens le samedi 6 mars de 9h00 à 12h00. Afin de respecter les mesures de sécurité, merci d'inscrire une personne par tranche horaire. Merci de laisser vos coordonnées (nom, email et téléphone) afin que l'on puisse vous joindre pour confirmer le rendez-vous et l'adresse. Lorsque vous entrer votre nom pour vous inscrire, merci d'indiquer également l'appartement que vous souhaitez visiter (n° ou nombre de pièces). En cas d'intérêt, merci de venir avec un dossier complet : - 3 dernières fiches de salaire - Extrait de l'office des poursuites - Copie carte d'identité ou permis de séjour - Copie de votre police d'assurance RC (responsabilité civile) et ménage Un formulaire de location sera à disposition sur place. Pour en savoir plus: https://quai-ouest.ch/location/logements\nINSCRIPTIONS : https://doodle.com/poll/5cvrqyt2ueaah3su?utm_source=poll&utm_medium=link\nNouvelle promotion de 89 logements en location idéalement située à la Gare de Renens, Quai Ouest ouvrira ses bras aux futurs locataires avec plusieurs options de logements, commerces et bureaux.\nCe magnifique appartement de 4.5 pièces se situe au 3° étage et a été construit avec de très beaux matériaux et se compose comme suit:\nSpacieux séjour de 40m2\nSuite parentale de 23.9m2 avec salle de douche italienne attenante\nDeux chambres à coucher d'environ 13m2 chacune\nRaccordement pour colonne de lavage\nUne salle de bains/WC\nCuisine ouverte avec îlot central et entièrement agencée avec lave-vaisselle\nStores électriques\nEntrée avec armoires murales\nLoyer net : CHF 2'600 .-\nCharges: CHF 320.-\nTotal: CHF 2'920.-\nAdresse: Place de la Gare à 1020 Renens\nPlus d'informations sur www.quai-ouest.ch/location/logements ainsi que chez Omnia Immobilier"""
+
+english_example = """Come and discover your future apartment at the Quai Ouest open house in Renens on Saturday, March 6th, from 9:00 am to 12:00 pm. In order to respect the security measures, please register one person per hour. Please leave your contact details (name, email and telephone) so that you can be reached to confirm the appointment and address. When entering your name to register, please also indicate the apartment you wish to visit (no or number of rooms). In case of interest, please come with a complete file: - 3 last salary slips - Excerpt from the prosecution office - Copy of identity card or residence permit - Copy of your insurance policy RC (civil liability) and household A rental form will be available on site. For more information: https://quai-ouest.ch/rental/housing INSCRIPTIONS: https://doodle.com/poll/5cvrqyt2ueaah3su?utm_source=poll&utm_medium=link New promotion of 89 rental units ideally located at the Gare de Renens, several new housing options. This magnificent 4.5-room apartment is located on the 3rd floor and has been built with beautiful materials and consists as follows: Spacious living room of 40m2 Master suite of 23.9m2 with adjoining Italian shower room Two bedrooms of about 13m2 each Wash-column connection A bathroom/WC Open kitchen with central island and fully arranged with dishwasher Electric stores Entrance with wall cabinets Net rent: CHF 2'600 .- Charges: CHF 320.- Total: CHF 2'920.- Address: Place de la Gare à 1020 Renens More information on www.quai-ouest.ch/location/housing as well as at Omnia Immobilier"""
+
+examples = [
+    ["French", french_example, 'price', "Combien payez-vous de loyer?"],
+    ["French", french_example, 'living_space', "Quelle est la surface en m2?"],
+    ["English", english_example, 'price', "How much is the rent?"],
+    ["English", english_example, 'living_space', "How large is the surface?"]
+]
+
+# Define the parameters
 title = "Extract relevant features from Real Estate Descriptions!"
 
 description = """
-<center>
-<img src="https://teara.govt.nz/files/c-21363-atl.jpg" width=300px>
-</center>
-<div style="text-align: justify">
-Features with missing instances can negatively impact the performance of machine learning models. Information Extraction (IE) can improve the availability of tabular data by identifying relevant information from unstructured textual descriptions. This project demonstrated the application of IE on descriptions of online real estate listings, whereby the required missing values are retrieved from the text. Inspired by question-answering tasks, the aim was to recover these values by asking a set of questions. We tested two ways to achieve this goal. The first one focuses on a model specific to the language of the description (French) to perform IE, while the second translates the descriptions into English before IE. The project compared the performance of both approaches while delivering insights on how the formulation of the questions can impact the effectiveness of Q&A models.
+<div style="margin-bottom: 1.5rem;">
+    <div style="display: flex; justify-content: center; margin-bottom: 1.5rem">
+        <img src="https://teara.govt.nz/files/c-21363-atl.jpg" width="300px" alt="Real Estate Image" style="border-radius: 8px;"/>
+    </div>
+    <div style="text-align: justify">
+    Features with missing instances can negatively impact the performance of machine learning models. Information Extraction (IE) can improve the availability of tabular data by identifying relevant information from unstructured textual descriptions. This project demonstrated the application of IE on descriptions of online real estate listings, whereby the required missing values are retrieved from the text. Inspired by question-answering tasks, the aim was to recover these values by asking a set of questions. We tested two ways to achieve this goal. The first one focuses on a model specific to the language of the description (French) to perform IE, while the second translates the descriptions into English before IE. The project compared the performance of both approaches while delivering insights on how the formulation of the questions can impact the effectiveness of Q&A models.
+    </div>
 </div>
 """
-article = """
-<center>
 
-Created by [Ilia Azizi](https://iliaazizi.netlify.app/) 2022
+css = """
+/* Comprehensive table text alignment */
+.table-wrap table td, 
+.table-wrap table td div,
+.table-wrap table td p,
+.examples-table td,
+.examples-table td div,
+.examples-table td p,
+.prose td,
+.prose td div,
+.prose td p {
+    text-align: left !important;
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+}
 
-</center>
-"""
+/* Ensure specific targeting of the real estate description column */
+.table-wrap table td:nth-child(2),
+.table-wrap table td:nth-child(2) div,
+.table-wrap table td:nth-child(2) p {
+    text-align: left !important;
+    padding: 8px !important;
+}
 
-# add some examples
-french_example = """ Venez découvrir votre futur appartement lors des portes ouvertes Quai Ouest à Renens le samedi 6 mars de 9h00 à 12h00. Afin de respecter les mesures de sécurité, merci d'inscrire une personne par tranche horaire. Merci de laisser vos coordonnées (nom, email et téléphone) afin que l'on puisse vous joindre pour confirmer le rendez-vous et l'adresse. Lorsque vous entrer votre nom pour vous inscrire, merci d'indiquer également l'appartement que vous souhaitez visiter (n° ou nombre de pièces). En cas d'intérêt, merci de venir avec un dossier complet : - 3 dernières fiches de salaire - Extrait de l'office des poursuites - Copie carte d'identité ou permis de séjour - Copie de votre police d'assurance RC (responsabilité civile) et ménage Un formulaire de location sera à disposition sur place. Pour en savoir plus: https://quai-ouest.ch/location/logements\nINSCRIPTIONS : https://doodle.com/poll/5cvrqyt2ueaah3su?utm_source=poll&utm_medium=link\nNouvelle promotion de 89 logements en location idéalement située à la Gare de Renens, Quai Ouest ouvrira ses bras aux futurs locataires avec plusieurs options de logements, commerces et bureaux.\nCe magnifique appartement de 4.5 pièces se situe au 3° étage et a été construit avec de très beaux matériaux et se compose comme suit:\nSpacieux séjour de 40m2\nSuite parentale de 23.9m2 avec salle de douche italienne attenante\nDeux chambres à coucher d'environ 13m2 chacune\nRaccordement pour colonne de lavage\nUne salle de bains/WC\nCuisine ouverte avec îlot central et entièrement agencée avec lave-vaisselle\nStores électriques\nEntrée avec armoires murales\nLoyer net : CHF 2'600 .-\nCharges: CHF 320.-\nTotal: CHF 2'920.-\nAdresse: Place de la Gare à 1020 Renens\nPlus d'informations sur www.quai-ouest.ch/location/logements ainsi que chez Omnia Immobilier"""
+/* Additional styling for better readability */
+.table-wrap table {
+    width: 100% !important;
+    table-layout: fixed !important;
+}
 
-english_example = """Come and discover your future apartment at the Quai Ouest open house in Renens on Saturday, March 6th, from 9:00 am to 12:00 pm. In order to respect the security measures, please register one person per hour. Please leave your contact details (name, email and telephone) so that you can be reached to confirm the appointment and address. When entering your name to register, please also indicate the apartment you wish to visit (no or number of rooms). In case of interest, please come with a complete file: - 3 last salary slips - Excerpt from the prosecution office - Copy of identity card or residence permit - Copy of your insurance policy RC (civil liability) and household A rental form will be available on site. For more information: https://quai-ouest.ch/rental/housing INSCRIPTIONS: https://doodle.com/poll/5cvrqyt2ueaah3su?utm_source=poll&utm_medium=link New promotion of 89 rental units ideally located at the Gare de Renens, several new housing options. This magnificent 4.5-room apartment is located on the 3rd floor and has been built with beautiful materials and consists as follows: Spacious living room of 40m2 Master suite of 23.9m2 with adjoining Italian shower room Two bedrooms of about 13m2 each Wash-column connection A bathroom/WC Open kitchen with central island and fully arranged with dishwasher Electric stores Entrance with wall cabinets Net rent: CHF 2'600 .- Charges: CHF 320.- Total: CHF 2'920.- Address: Place de la Gare à 1020 Renens More information on www.quai-ouest.ch/location/housing as well as at Omnia Immobilier"""
+.table-wrap table td {
+    vertical-align: top !important;
+}
+"""
 
-examples = [["French", french_example, 'price', "Combien payez-vous de loyer?"],
-["French", french_example, 'living_space', "Quelle est la surface en m2?"],
-["English", english_example, 'price', "How much is the rent?"],
-["English", english_example, 'living_space', "How large is the surface?"]]
+article = """
+<div style="text-align: center; margin-top: 1.5rem;">
+    Created by <a href="https://iliaazizi.netlify.app/" target="_blank" style="color: #2563eb;">Ilia Azizi</a> 2022
+</div>
+"""
 
-#---------------------------------------------------------------------------------
-# run the demo
-demo = gr.Interface(
-    fn=get_native_feature_demo,
-    inputs=[
-            gr.inputs.Radio(["French", "English"], label="Language", type = "value"),
-            gr.inputs.Textbox(lines=10, label="Real Estate Description", placeholder="Type a real estate description here."),
-            gr.inputs.Dropdown(["price", "living_space"], label="Target Feature", type = "value"),
-            gr.inputs.Textbox(lines=2, label="Question", placeholder="Ask to retrieve a feature.")],
-    outputs = [gr.outputs.Textbox(label = "Extracted Feature"), gr.outputs.Textbox(label = "Probability of the prediction"), gr.outputs.Textbox(label = "Full Q&A answer")],
-    title = title,
-    description = description,
-    article = article,
-    examples=examples
-)
+# Create the Gradio interface
+with gr.Blocks(title=title, css=css) as demo:
+    gr.HTML(description)
+    
+    with gr.Row():
+        with gr.Column():
+            language = gr.Radio(
+                choices=["French", "English"],
+                label="Language",
+                value="French"
+            )
+            target_feature = gr.Dropdown(
+                choices=["price", "living_space"],
+                label="Target Feature",
+                value="price"
+            )
+            question = gr.Textbox(
+                lines=2,
+                label="Question",
+                placeholder="Ask to retrieve a feature."
+            )
+            input_description = gr.Textbox(
+                lines=10,
+                label="Real Estate Description",
+                placeholder="Type a real estate description here."
+            )
+            submit_btn = gr.Button("Extract Feature", variant="primary")
+        
+        with gr.Column():
+            extracted_feature = gr.Textbox(label="Extracted Feature")
+            prediction_prob = gr.Textbox(label="Probability of the prediction")
+            full_answer = gr.Textbox(label="Full Q&A answer")
+    
+    gr.Examples(
+        examples=examples,
+        inputs=[language, input_description, target_feature, question],
+        outputs=[extracted_feature, prediction_prob, full_answer],
+        fn=get_native_feature_demo,
+        cache_examples=True
+    )
+    
+    gr.HTML(article)
+    
+    submit_btn.click(
+        fn=get_native_feature_demo,
+        inputs=[language, input_description, target_feature, question],
+        outputs=[extracted_feature, prediction_prob, full_answer]
+    )
 
-demo.launch(inline=False)
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -1,5 +1,7 @@
-transformers
-torch
-regex
-gradio
-sentencepiece
+gradio>=4.12.0
+torch>=2.0.0
+transformers>=4.36.0
+protobuf>=4.25.1
+sentencepiece>=0.1.99
+tokenizers>=0.15.0
+sacremoses>=0.1.1