Update app.py

app.py

@@ -186,41 +186,43 @@ CSS ="""
   min-width: min(160px, 100%);
   border-width: var(--block-border-width);
 }
+
+/* Đảm bảo ảnh bên trong nút hiển thị đúng cách cho các nút có aria-label chỉ định */
+button.svelte-1lcyrx4[aria-label="user's message: a file of type image/jpeg, "] img.svelte-1pijsyv {
+  width: 100%;
+  object-fit: contain;
+  height: 100%;
+  border-radius: 13px; /* Thêm bo góc cho ảnh */
+  max-width: 50vw;     /* Giới hạn chiều rộng ảnh */
+}
+/* Đặt chiều cao cho nút và cho phép chọn văn bản chỉ cho các nút có aria-label chỉ định */
+button.svelte-1lcyrx4[aria-label="user's message: a file of type image/jpeg, "] {
+  user-select: text;
+  text-align: left;
+  height: 300px;
+}
+/* Thêm bo góc và giới hạn chiều rộng cho ảnh không thuộc avatar container */
+.message-wrap.svelte-1lcyrx4 > div.svelte-1lcyrx4 .svelte-1lcyrx4:not(.avatar-container) img {
+  border-radius: 13px;
+  max-width: 50vw;
+}
+.message-wrap.svelte-1lcyrx4 .message.svelte-1lcyrx4 img {
+    margin: var(--size-2);
+    max-height: 500px;
+}
+.image-preview-close-button {
+  position: relative; /* Nếu cần định vị trí */
+  width: 5%; /* Chiều rộng nút */
+  height: 5%; /* Chiều cao nút */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0; /* Để tránh ảnh hưởng từ padding mặc định */
+  border: none; /* Tùy chọn để loại bỏ đường viền */
+  background: none; /* Tùy chọn để loại bỏ nền */
+}
 """
-# /* Đảm bảo ảnh bên trong nút hiển thị đúng cách cho các nút có aria-label chỉ định */
-# button.svelte-1lcyrx4[aria-label="user's message: a file of type image/jpeg, "] img.svelte-1pijsyv {
-#   width: 100%;
-#   object-fit: contain;
-#   height: 100%;
-#   border-radius: 13px; /* Thêm bo góc cho ảnh */
-#   max-width: 50vw;     /* Giới hạn chiều rộng ảnh */
-# }
-# /* Đặt chiều cao cho nút và cho phép chọn văn bản chỉ cho các nút có aria-label chỉ định */
-# button.svelte-1lcyrx4[aria-label="user's message: a file of type image/jpeg, "] {
-#   user-select: text;
-#   text-align: left;
-#   height: 300px;
-# }
-# /* Thêm bo góc và giới hạn chiều rộng cho ảnh không thuộc avatar container */
-# .message-wrap.svelte-1lcyrx4 > div.svelte-1lcyrx4 .svelte-1lcyrx4:not(.avatar-container) img {
-#   border-radius: 13px;
-#   max-width: 50vw;
-# }
-# .message-wrap.svelte-1lcyrx4 .message.svelte-1lcyrx4 img {
-#     margin: var(--size-2);
-#     max-height: 500px;
-# }
-# .image-preview-close-button {
-#   position: relative; /* Nếu cần định vị trí */
-#   width: 10%; /* Chiều rộng nút */
-#   height: 10%; /* Chiều cao nút */
-#   display: flex;
-#   justify-content: center;
-#   align-items: center;
-#   padding: 0; /* Để tránh ảnh hưởng từ padding mặc định */
-#   border: none; /* Tùy chọn để loại bỏ đường viền */
-#   background: none; /* Tùy chọn để loại bỏ nền */
-# }
+
 
 demo = gr.ChatInterface(
     fn=chat,