Update app.py

app.py

@@ -14,16 +14,16 @@ body {
     background-color: #000000;
 }
 .sidebar .sidebar-content {
-    background-color: #1A1A1A !important;
+    background-color: #050505 !important;
     padding: 0.5rem 0 0 0;
 }
 header, #MainMenu, footer {visibility: hidden;}
 .category-button {
-    background-color: #222222;
+    background-color: #0A0A0A;
     color: #FFFFFF;
     border: none;
     text-align: left;
-    font-size: 1.1rem;
+    font-size: 0.77rem;
     font-weight: bold;
     padding: 10px 10px 10px 15px;
     width: 100%;
@@ -31,34 +31,34 @@ header, #MainMenu, footer {visibility: hidden;}
     transition: background-color 0.3s;
 }
 .category-button:hover {
-    background-color: #333333;
+    background-color: #0F0F0F;
 }
 .category-button:focus {
     outline: none;
 }
 .selected-category {
-    background-color: #444444 !important;
+    background-color: #151515 !important;
     color: #FFFFFF !important;
 }
 .submenu-button {
-    background-color: #2A2A2A;
+    background-color: #0C0C0C;
     color: #FFFFFF;
     border: none;
     text-align: left;
-    font-size: 1rem;
+    font-size: 0.7rem;
     padding: 6px 6px 6px 25px;
     width: 100%;
     margin: 0;
     transition: background-color 0.3s;
 }
 .submenu-button:hover {
-    background-color: #3A3A3A;
+    background-color: #111111;
 }
 .submenu-button:focus {
     outline: none;
 }
 .selected-submenu {
-    background-color: #4A4A4A !important;
+    background-color: #181818 !important;
     color: #FFFFFF !important;
     font-weight: bold;
 }
@@ -79,11 +79,6 @@ st.set_page_config(
 # Apply CSS
 st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
 
-# Sidebar menu
-st.sidebar.markdown('<h1 style="margin-left: 15px;">메뉴</h1>', unsafe_allow_html=True)
-
-
-
 # Menu structure (can be easily extended for multi-language support)
 menu_structure = {
     "베스트 TOP 10": ["FLUX LoRA 스튜디오", "[서치+VisionLLM] 한국어 JinJavis","FLUX 확장 이미지 생성","이미지와 한글 프롬프트로 이미지 변형","LOGO 디자인 생성","FLUX GIF 생성","이미지와 프롬프트로 영상 생성","텍스트로 객체만 잘라내고 배경 투명화","상품 사진 업로드+프롬프트로 배경을 합성","EveryText: 모든 문자가 이미지 생성에 반영"],
@@ -114,7 +109,7 @@ def select_item(item):
     st.session_state.selected_item = item
 
 # Sidebar menu
-st.sidebar.title("메뉴")
+st.sidebar.markdown('<h1 style="font-size: 1.4rem; margin-left: 15px;">메뉴</h1>', unsafe_allow_html=True)
 
 for category, items in menu_structure.items():
     is_expanded = st.session_state.expanded_category == category
@@ -144,10 +139,10 @@ content_map = {
     "상품 사진 업로드+프롬프트로 배경을 합성": "https://aiqtech-producbrmg.hf.space",                      
     "EveryText: 모든 문자가 이미지 생성에 반영": "https://fantos-EveryText.hf.space",  
 
-    "FLUXLoRA스튜디오 서버#1": "https://seawolf2357-flxloraexp.hf.space", #(person)
-    "FLUXLoRA스튜디오 서버#2": "https://fantaxy-flxloraexp.hf.space",       #(eric)
-    "FLUXLoRA스튜디오 서버#3": "https://fantos-flxloraexp.hf.space",         #(rolls)                                    
-    "FLUXLoRA스튜디오 서버#4": "https://ginipick-flxloraexp.hf.space",      #(wolf)  
+    "FLUXLoRA스튜디오 서버#1": "https://seawolf2357-flxloraexp.hf.space",
+    "FLUXLoRA스튜디오 서버#2": "https://fantaxy-flxloraexp.hf.space",
+    "FLUXLoRA스튜디오 서버#3": "https://fantos-flxloraexp.hf.space",
+    "FLUXLoRA스튜디오 서버#4": "https://ginipick-flxloraexp.hf.space",
     
     "FLUX LoRA 스튜디오": "https://fantos-flxloraexp.hf.space",        
     "FLUX 확장 이미지 생성": "https://fantaxy-ofai-flx-expl-store.hf.space",
@@ -197,7 +192,6 @@ content_map = {
     "의학 전문 블로그 생성": "https://seawolf2357-ofai-jinjavis-blog-medi.hf.space",            
     "약리학 전문 블로그 생성": "https://seawolf2357-ofai-jinjavis-blog-pharm.hf.space" ,   
 
-
     "블로그 자동(컨펌/단수) 생성": "https://fantaxy-blogger-send-webhook-confirm-image.hf.space",
     "블로그 자동(무인/복수) 생성": "https://fantaxy-blogger-send-webhook-auto-image.hf.space" ,     
 
@@ -206,13 +200,13 @@ content_map = {
 
 if st.session_state.selected_item in content_map:
     main_content.markdown(
-        f'<iframe src="{content_map[st.session_state.selected_item]}" width="100%" height="800" frameborder="0"></iframe>',
+        f'<iframe src="{content_map[st.session_state.selected_item]}" width="100%" height="800" frameborder="0" allow="microphone"></iframe>',
         unsafe_allow_html=True
     )
 else:
     main_content.markdown("<h2>메뉴에서 항목을 선택하세요.</h2>")
 
-# Add JavaScript for dynamic iframe resizing
+# Add JavaScript for dynamic iframe resizing and microphone permission
 st.markdown("""
 <script>
 function resizeIframe() {
@@ -221,7 +215,16 @@ function resizeIframe() {
         iframe.style.height = window.innerHeight + 'px';
     }
 }
+async function requestMicrophonePermission() {
+    try {
+        await navigator.mediaDevices.getUserMedia({ audio: true });
+        console.log("Microphone permission granted");
+    } catch (err) {
+        console.error("Error requesting microphone permission:", err);
+    }
+}
 window.addEventListener('resize', resizeIframe);
 resizeIframe();
+requestMicrophonePermission();
 </script>
-""", unsafe_allow_html=True)
+""", unsafe_allow_html=True)