Update app.py

app.py

@@ -1,77 +1,165 @@
 import gradio as gr
 
-# Define the content sections
-content = {
-    "Location and Weather": """
+with gr.Blocks() as iface:
+    gr.Image(
+        value = "https://blog.float16.cloud/content/images/size/w2000/2024/08/ACL2024_BKK_Guidebook.png",
+        width = 740,
+        height = 378,    
+    )
+    gr.Markdown(
+    """
+    ## ACL 2024 Bangkok Guidebook
+            
+    Hello everyone, welcome to ACL 2024 and welcome to Bangkok! 
+    I'm Mati, the founder of Float16.cloud. I'm Thai and based in Bangkok. 
+    The upcoming ACL 2024 will be held from August 11th to 16th, 2024, at Centara Grand and Bangkok Convention Centre. 
+    I want to provide an update on how to 'deal' with Bangkok in several aspects such as:
+
+    - Location and Weather
+    - Maps
+    - Internet SIM cards
+    - Transportation
+    - Food
+    - Coffee
+    - Medicine
+    - People and Language
+    - Recommended activities
+
+    ---
+
+    ### Location and Weather
     Centara Grand and Bangkok Convention Centre (Centara Grand) are located in the center of Bangkok, at the same place as Central World.
-    Centara Grand is between the BTS (Bangkok Mass Transit) Siam Center station and Chidlom station. You can get off at either Siam Center or Chidlom and walk via the skywalk directly to Centara Grand (400m - 800m).
-    BTS vending machines primarily accept cash, both banknotes and coins, and they return change in coins. Please use 20 baht or 100 baht banknotes. And good news for Chinese visitors: BTS vending machines accept WeChat Pay and Alipay.
+    Centara Grand is between the BTS (Bangkok Mass Transit) Siam Center station and Chidlom station. 
+    You can get off at either Siam Center or Chidlom and walk via the skywalk directly to Centara Grand (400m - 800m).
+
+    > **_NOTE:_** BTS vending machines primarily accept cash, both banknotes and coins, and they return change in coins. Please use 20 baht or 100 baht banknotes. And good news for Chinese visitors: BTS vending machines accept WeChat Pay and Alipay.
+    """)
+    gr.Image(value = 'https://blog.float16.cloud/content/images/2024/08/IMG_001C66AE689E-1.jpeg', width = 740, height = 660)
+    gr.Markdown(
+    """
     Grab ride-hailing is another excellent choice for transportation in Bangkok, and the most effective option for short distances (less than 5km) is GrabBike (motorcycle).
-    I highly recommend NOT walking any distance without using the skywalk. Crosswalks without traffic lights are DANGEROUS, and I don't recommend taking a bus in Bangkok.
+
+    > **_NOTE:_** I highly recommend NOT walking any distance without using the skywalk. Crosswalks without traffic lights are DANGEROUS, and I don't recommend taking a bus in Bangkok.
     At the moment (August 5th), it is the rainy season with temperatures between 25°C and 35°C.
-    """,
-    "Maps": """
+    """
+    )
+    gr.Image(value='https://blog.float16.cloud/content/images/size/w1600/2024/08/Screenshot-2567-08-05-at-21.23.18.jpg', width=740, height=415)
+    gr.Markdown(
+    """
+    ---
+
+    ### Maps
     In Thailand, we use Google Maps as the primary tool for searching locations, coffee shops, restaurants, hotels, grocery stores, pharmacies, and estimating arrival times.
+    """
+    )
+    gr.Image(value="https://blog.float16.cloud/content/images/size/w1600/2024/08/Screenshot-2567-08-05-at-21.08.25.jpg", width=740, height=380)
+    gr.Markdown(
+    """
     However, if you can't use Google Maps, you can use Apple Maps instead.
-    """,
-    "Internet SIM cards": """
+
+    ---
+
+    ### Internet SIM cards
     Thailand has extensive 5G coverage and density, especially in Bangkok.
-    The price of 5G is very cheap, about 50GB for 30 USD per month. You can buy a SIM card at the airport or at 7-Eleven. You can choose any provider, as there is no significant difference between AIS and True.
-    """,
-    "Transportation": """
+    The price of 5G is very cheap, about 50GB for 30 USD per month. You can buy a SIM card at the airport or at 7-Eleven. 
+    You can choose any provider, as there is no significant difference between AIS and True.
+
+    ---
+
+    ### Transportation
+    """
+    )
+    gr.Image(value="https://loyaltylobby.com/wp-content/uploads/2024/04/Grab-BKK-Pick-Up-Point-Floor-1-Exit-4-Borh.png", width=740, height=415)
+    gr.Markdown(
+    """
     Suvarnabhumi airport grab pickup 2nd floor exit 4.
     Ref : https://thesmartlocal.co.th/grab-suvarnabhumi-airport/
-    """,
-    "Food": """
+    
+    ---
+    
+    ### Food
+
     Grab food delivery is the best choice for convenience.
     Pricing starts at about 3 USD.
+    """)
+    gr.Image(value="https://blog.float16.cloud/content/images/2024/08/IMG_A29E8E5DD82D-1.jpeg", width=740, height=880)
+    gr.Markdown(
+    """
     Another option is the restaurants at Central World.
-    Central World is one of the most famous shopping malls in Bangkok. You can find any food style at Central World.
-    """,
-    "Coffee": """
+    Central World is one of the most famous shopping malls in Bangkok. 
+    You can find any food style at Central World.
+    """)
+    gr.Image(value="https://image.posttoday.com/media/content/2020/12/14/AF1F5A1E3784AF56AFCE307BE3C2E27B.jpg?x-image-process=style/lg-webp", width=740, height=600)
+    gr.Markdown(
+    """
+    ---
+
+    ### Coffee
     I highly recommend Starbucks. The pricing is about 5 USD.
     Starbucks is a good spot for waiting and discussing. At Central World, they have four Starbucks locations.
     The first Starbucks Reserve is on the first floor.
+    """)
+    gr.Image(value="https://images.lifestyleasia.com/wp-content/uploads/2018/06/14174814/Starbucks-Thailand-CentralWorld-9-copy.jpg", width=740, height=420)
+    gr.Markdown(
+    """
     The second Starbucks is on the second floor near the BTS Skywalk.
+    """)
+    gr.Image(value="https://st-th-1.byteark.com/assets.punpro.com/contents/i9805/1596293811827-Starbucks_200801_0004.png", width=740, height=420)
+    gr.Markdown(
+    """
     The third Starbucks is on the third floor.
+    """)
+    gr.Image(value="https://st-th-1.byteark.com/assets.punpro.com/contents/i9805/1596293815923-Starbucks_200801_0011.png", width=740, height=420)
+    gr.Markdown(
+    """
     The last Starbucks is on the fifth floor.
-    """,
-    "Medicine": """
+    """)
+    gr.Image(value="https://st-th-1.byteark.com/assets.punpro.com/contents/i9805/1596528555406-S__21119055.jpg", width=740, height=420)
+    gr.Markdown(
+    """
+    ---
+    
+    ### Medicine
     I recommend using GrabMart to buy medicine.
+    """)
+    gr.Image(value="https://blog.float16.cloud/content/images/2024/08/IMG_612D5DB647F2-1.jpeg", width=740, height=880)
+    gr.Markdown(
+    """
     For stores, you can choose either Boots or Watsons. Both of them have pharmacists available in the shop.
-    """,
-    "People and Language": """
+    """)
+    gr.Image(value="https://brandinside.asia/wp-content/uploads/2019/05/shutterstock_198017516-e1559121343456.jpg", width=740, height=480)
+    gr.Image(value="https://i0.wp.com/chaileedo.com/wp-content/uploads/2023/06/file-q3FZXT.png?fit=1000%2C562&ssl=1", width=740, height=480)
+    gr.Markdown(
+    """
+    ---
+
+    ### People and Language
     Thai people mostly use transliterated English words for venues, locations, and coffee menus.
     A few Thai people can speak Chinese, but it's not guaranteed.
     Google Translate is not very good for translating English to Thai or Chinese to Thai.
-    """,
-    "Recommended activities": """
+
+    ---
+
+    ### Recommended activities
     For personal advice, I highly recommend getting any 'Oral treatment' because of the price.
     You can search on Google Maps to find a dental clinic near your hotel.
-    """,
-    "Farewell": """
+    
+    ---
+
+    ### Farewell
     Hope you guys enjoy this guidebook and find it useful.
     If you need any help, please reach out to me via the Discord #ACL2024 channel or on X.
-    Discord
-    X
-    """,
-    "About Float16.cloud": """
-    Float16.cloud provides a managed GPU resource platform for developers. This includes modern GPU services like LLM as a Service, one-click deployment, serverless GPU, one-click training, and more features coming in the future.
-    If you need emergency H100 sponsor please contact me.
-    """
-}
+    
+    [Discord](https://discord.com/invite/j2DVTMjr67?ref=blog.float16.cloud)
 
-def display_section(section):
-    return content[section]
-
-# Create the Gradio interface
-iface = gr.Interface(
-    fn=display_section,
-    inputs=gr.inputs.Dropdown(list(content.keys()), label="Select a section"),
-    outputs="text",
-    title="ACL 2024 Guide",
-    description="Welcome to ACL 2024 in Bangkok! Select a section to get information."
-)
+    [X](https://twitter.com/KMatiDev1?ref=blog.float16.cloud)
+    
+    ---
 
+    ### About [Float16.cloud](Float16.cloud)
+    Float16.cloud provides a managed GPU resource platform for developers.
+    This includes modern GPU services like LLM as a Service, one-click deployment, serverless GPU, one-click training, and more features coming in the future.
+    If you need emergency H100 sponsor please contact me.
+    """)
 # Launch the interface
 iface.launch()