"""
# 모바일 및 데스크톱용 위치 이미지를 Base64로 인코딩
location_image_mobile = encode_image_to_base64("static/location.png")
location_image_desktop = encode_image_to_base64("static/location_w.png")
# location_html 정의
if not location_image_mobile or not location_image_desktop:
location_html = """
""")
gr.Markdown("""
**청신(淸神)** 단계는 신을 부르는 의식으로, 정화와 연결의 의미를 담고 있습니다.
이 단계에서는 참여자가 도시의 번잡함에서 벗어나 내면의 고요함을 찾고 신성과의 교감을 시작하게 됩니다.
본격적인 의식을 시작하기 전, 마음을 정화하고 감각을 열어 경험에 몰입할 준비를 마치세요
""")
with gr.Column():
gr.HTML(location_html)
gr.Markdown("""
### 보다 몰입된 경험을 위해
이 경험은 부산 동래구 온천장역에서 시작하여, 금정구 장전역까지 온천천을 따라 신화적 공간과 연결될 수 있도록 설계되었습니다.
특히 이곳에서 시작하면 온천천의 자연스러운 소리와 금샘의 생명력을 더욱 깊이 느낄 수 있습니다.
온천천을 따라 걷다 보면, 금샘과 연결된 물의 정화 에너지가 스며들며 신성을 느끼게 될 것입니다.
청신 단계의 목적은 참여자들이 자연과 신화적 요소를 통해 감각을 깨우고 자신의 감정을 정화하며, 초자연적 존재와 소통할 준비를 하는 데 있습니다.
특히 온천천의 물소리와 자연의 소리는 신을 부르는 소리처럼 참여자의 마음을 고요하게 하고, 금샘 신화의 정화와 생명력의 상징성을 통해 신을 맞이할 준비를 갖추게 합니다.
### 이제 음악을 들으며 감정을 기록해보세요.
음악을 통해 내면의 평온을 되찾고, 이 과정에서 느껴지는 감정과 생각들을 자유롭게 적어보세요. 이 기록은 이후 과정에서 소망과 의식을 구체화하는 데 큰 도움이 될 것입니다.
""")
# 커스텀 오디오 플레이어
gr.Markdown("## 聽身, 請神 (몸의 소리를 듣고 신을 청하다) ")
gr.HTML("""
음악을 들으며 마음을 정화하고 내면의 소리에 귀를 기울여보세요.
""")
with gr.Column():
reflection_input = gr.Textbox(
label="기록과 함께 마음의 번잡함을 내려놓으세요. 본 정보는 작성 당사자 외는 확인할 수 없으며, 저장되지 않습니다.",
lines=3,
max_lines=5
)
save_btn = gr.Button("기록 남기기", variant="secondary")
reflections_display = gr.Dataframe(
headers=["시간", "감상", "감정 분석"],
label="기록된 감상들",
value=[],
interactive=False,
wrap=True,
row_count=(5, "dynamic")
)
# 기원 탭
with gr.TabItem("기원") as tab_wish:
gr.Markdown("## 기원 - 소망을 천명하고 신에게 바라는 의식체")
gr.Markdown("""
'기원' 단계에서는 참여자가 산책로를 걷는 동안 자신의 감정과 내면을 인식하고, 마음속 소망을 음성으로 표현합니다.
입에서 나오는 소리는 단순한 음성이 아니라, 신령이나 자연에 자신의 진정한 소망과 감정을 전달하는 중요한 발화입니다.
이제 당신의 소망을 음성으로 발화해보세요. 이 발화는 신과의 의식적인 소통의 일부로,
참여자의 소망이 신성의 영역에 닿을 수 있도록 돕습니다.
마음속에서 떠오르는 바람을 말해보세요. 이 과정은 소망을 명확하게 정리하고,
당신의 감정과 바람을 외부로 표현하는 강력한 의식적 행동이 될 것입니다.
""")
status_display = gr.Markdown("", visible=False) # 상태 표시용 컴포넌트
with gr.Row():
with gr.Column():
voice_input = gr.Audio(
label="당신의 소원을 말해주세요",
sources=["microphone"],
type="numpy",
streaming=False,
elem_id="voice-input" # elem_id 추가
)
with gr.Row():
clear_btn = gr.Button("녹음 지우기", variant="secondary")
analyze_btn = gr.Button("소원 분석하기", variant="primary")
with gr.Column():
transcribed_text = gr.Textbox(
label="인식된 텍스트",
interactive=False
)
voice_emotion = gr.Textbox(
label="음성 감정 분석",
interactive=False
)
text_emotion = gr.Textbox(
label="텍스트 감정 분석",
interactive=False
)
# 송신 탭
with gr.TabItem("송신") as tab_send:
gr.Markdown("## 송신 - 신과 내 마음을 보내다")
gr.Markdown("""
송신 단계는 참여자가 내면의 소망을 더욱 구체화하여 외부로 전달하는 중요한 과정입니다.
이 과정에서, 발화된 언어와 감정이 담긴 소망은 시각적 이미지로 표현됩니다..
아래 버튼을 눌러 자신의 소망을 그림으로 그려 보세요.
이 그림은 발화된 감정의 흐름과 참여자의 소망을 상징적으로 담아내어 눈에 보이는 형상으로 재현됩니다.
생성된 이미지를 통해 내면의 바람이 어떻게 구체화되는지 경험하고,
당신의 소망이 전해지는 과정을 시각적으로 확인해 보세요.
""")
final_prompt = gr.Textbox(
label="생성된 프롬프트",
interactive=False,
lines=3
)
generate_btn = gr.Button("마음의 그림 그리기", variant="primary")
result_image = gr.Image(
label="생성된 이미지",
show_download_button=True
)
gr.Markdown("## 온천천에 전하고 싶은 소원을 남겨주세요")
final_reflection = gr.Textbox(
label="소원",
placeholder="당신의 소원을 한 줄로 남겨주세요...",
max_lines=3
)
save_final_btn = gr.Button("소원 전하기", variant="primary")
gr.Markdown("""
💫 여러분의 소원은 11월 28-29일 부산대 지하철역 인근 온천천 벽면에 설치될 소원나무에 전시될 예정입니다.
따뜻한 마음을 담아 작성해주세요.
""")
wishes_display = gr.Dataframe(
headers=["시간", "소원", "이름"],
label="기록된 소원들",
value=[],
interactive=False,
wrap=True
)
with gr.TabItem("프로젝트 소개") as tab_intro:
gr.HTML(main_image_html)
gr.Markdown("""
# 디지털 굿판: 몰입형 다원예술 프로젝트
**디지털 굿판**은 부산문화재단의 지원을 받아 창작된 몰입적 다원예술 작품으로, 전통적 세습무의 의례적 구조를 현대적 디지털 공간에서 재해석한 디지털 의례 공간입니다. 이 프로젝트는 한국 전통 굿 의식의 세습무 의례를 바탕으로, AI 기술, 음악, 자연, 그리고 일상 공간이 융합된 독창적 경험을 제공합니다. 참여자는 이 의례적 경험을 통해 내면의 정화와 신성에의 초월적 연결을 체험하고, 일상과 신성의 경계를 허물며 삶의 본질에 대한 질문을 던지게 됩니다.
### 디지털 굿판은 세 가지 주요 의례적 단계로 구성됩니다:
1. **청신(淸神)**: 정화와 신성에의 준비 과정으로, 참여자가 도시의 번잡함에서 벗어나 자연과 신화적 소리를 통해 내면을 정화합니다. 온천천의 물소리와 루츠리딤의 음악은 굿 의식의 정화 단계를 음악으로 변형하여, 신을 부르는 초월적 의식에 몰입하게 합니다.
2. **기원**: 참여자는 자신의 감정과 소망을 발화하여 의례적 상징성을 더합니다. 강신무의 트랜스 경험을 재현한 음악과 함께, AI가 발화된 감정을 분석하고 이를 시각적 데이터로 변환합니다. 이 시각화는 금샘의 신화적 상징성을 재해석하여 개인의 소망을 신성과 연결하는 예술적 매개체로 작용합니다.
3. **송신**: 마지막 단계에서는 정화와 기원을 거쳐 구체화된 소망을 상징적 시각 표현으로 전환하여 외부로 전달합니다. AI와 디지털 기술이 결합하여 참여자의 내면적 바람을 외부로 확장하고, 예술적 시각 언어를 통해 신성에 도달하는 과정을 형상화합니다.
**디지털 굿판**은 전통 신화와 예술, 첨단 AI 기술이 융합하여 신과 인간의 교감, 내면과 외부의 경계를 탐구하는 예술적 시도입니다. 전통적 굿의 치유적 효과를 현대의 감각적 경험으로 체화하며, 예술과 기술의 융합을 통해 새로운 의례와 감정의 형식을 제안합니다. 이 프로젝트는 전통을 기반으로 한 감각적 초월의 경험을 디지털 시대의 언어로 재해석하여, 예술의 확장 가능성과 현대 사회에서의 치유적 역할을 고찰하는 다원예술의 새로운 지평을 제시합니다.
## 루츠리딤
세계 각 국의 전통장단을 연구하고 현대적으로 재해석하는 월드뮤직 트랜스 그룹. 종으로는 정통과 현대를, 횡으로는 동양과 서양을 한데 아우르며 새로운 장르의 차별화된 월드뮤직을 개척
국악기로 서양음악을 연주하는 평범한 퓨전국악 프레임에서 탈피, 동서양의 콜라보레이션으로 퓨처국악을 표방하는 실험적 예술단체입니다.
Instagram [@roots_redeem](https://www.instagram.com/roots_redeem/)
## 윤리조항
디지털 굿판은 현대 사회에서 예술과 기술이 교차하는 지점에서, 삶과 치유에 대한 근본적인 질문을 던집니다. 프로젝트 중 기록된 모든 정보(목소리, 감상 등)는 ‘송신’ 단계의 ‘소원전하기’를 제외하고는 별도로 저장되지 않으며, AI 학습이나 외부 공유에 사용되지 않습니다.
## CREDITS
- **기획**: 루츠리딤, 전승아
- **음악**: 루츠리딤 (이광혁)
- **미디어아트**: 송지훈
""")
# 이벤트 핸들러들
def handle_name_submit(name, state):
if not name.strip():
return (
gr.update(visible=True),
gr.update(visible=False),
gr.update(visible=False),
state
)
state = safe_state_update(state, {"user_name": name})
return (
gr.update(visible=False),
gr.update(visible=True),
gr.update(visible=False),
state
)
def handle_continue():
return (
gr.update(visible=False),
gr.update(visible=False),
gr.update(visible=True)
)
def handle_blessing_complete(audio, state):
# 분석 중 메시지 표시
initial_status = "분석 중입니다. 잠시만 기다려주세요..."
# 오디오가 없을 경우 바로 메시지 반환
if audio is None:
return state, "축원 문장을 먼저 녹음해주세요.", initial_status
try:
sr, y = audio
features = calculate_baseline_features((sr, y))
# 분석이 완료된 경우
if features:
state = safe_state_update(state, {"baseline_features": features})
detailed_msg = f"""
### 축원 분석이 완료되었습니다
**음성 특성 분석:**
- 음성 강도: {features['energy']:.2f}
- 음성 속도: {features['tempo']:.2f}
- 음성 높낮이: {features['pitch']:.2f}
- 음성 크기: {features['volume']:.2f}
축원이 완료되었습니다. 이제 청신 탭으로 이동하여 의식을 진행해주세요.
"""
return state, detailed_msg, "" # 초기 상태는 비워서 완료 상태로 만듭니다.
# 분석 실패 시 메시지
return state, "분석에 실패했습니다. 다시 시도해주세요.", initial_status
except Exception as e:
return state, f"오류가 발생했습니다: {str(e)}", initial_status
def handle_enter():
return gr.update(selected=1) # 청신 탭으로 이동
def handle_start():
return gr.update(visible=False), gr.update(visible=True)
def handle_baseline(audio, current_state):
if audio is None:
return current_state, "음성을 먼저 녹음해주세요.", gr.update(selected=0)
try:
sr, y = audio
y = y.astype(np.float32)
features = calculate_baseline_features((sr, y))
if features:
current_state = safe_state_update(current_state, {
"baseline_features": features,
"current_tab": 1
})
return current_state, "기준점이 설정되었습니다. 청신 탭으로 이동합니다.", gr.update(selected=1)
return current_state, "기준점 설정에 실패했습니다. 다시 시도해주세요.", gr.update(selected=0)
except Exception as e:
print(f"Baseline error: {str(e)}")
return current_state, "오류가 발생했습니다. 다시 시도해주세요.", gr.update(selected=0)
def move_to_chungshin():
return gr.Tabs.update(selected="청신")
def handle_save_reflection(text, state):
if not text.strip():
return state, []
try:
current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
name = state.get("user_name", "익명")
# 감정 분석
if text_analyzer:
sentiment = text_analyzer(text)[0]
sentiment_text = f"{sentiment['label']} ({sentiment['score']:.2f})"
else:
sentiment_text = "분석 불가"
# 현재 사용자의 기존 reflections 가져오기
if "reflections" not in state:
state["reflections"] = []
# 새로운 reflection 추가
new_reflection = {
"timestamp": current_time,
"text": text,
"sentiment": sentiment_text
}
state["reflections"].append(new_reflection)
# DB에 저장
db.save_reflection(name, text, sentiment_text)
# 화면에 표시할 데이터 생성 (현재 사용자의 모든 기록)
display_data = [
[r["timestamp"], r["text"], r["sentiment"]]
for r in state["reflections"]
]
return state, display_data
except Exception as e:
print(f"Error saving reflection: {e}")
return state, []
def save_reflection_fixed(text, state):
if not text.strip():
return state, []
try:
current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
name = state.get("user_name", "익명")
if text_analyzer:
sentiment = text_analyzer(text)[0]
sentiment_text = f"{sentiment['label']} ({sentiment['score']:.2f})"
else:
sentiment_text = "분석 불가"
# DB에 저장
db.save_reflection(name, text, sentiment_text)
# 현재 사용자의 감상만 표시
return state, [[current_time, text, sentiment_text]]
except Exception as e:
print(f"Error saving reflection: {e}")
return state, []
def handle_save_wish(text, state):
if not text.strip():
return "소원을 입력해주세요.", []
try:
name = state.get("user_name", "익명")
db.save_wish(name, text)
wishes = db.get_all_wishes()
wish_display_data = [
[wish["timestamp"], wish["wish"], wish["name"]]
for wish in wishes
]
return "소원이 저장되었습니다.", wish_display_data
except Exception as e:
print(f"Error saving wish: {e}")
return "오류가 발생했습니다.", []
def safe_analyze_voice(audio_data, state):
if audio_data is None:
return state, "음성을 먼저 녹음해주세요.", "", "", "", "분석 준비 중..."
try:
status_msg = "음성 분석 중..."
sr, y = audio_data
if len(y) == 0:
return state, "음성이 감지되지 않았습니다.", "", "", "", "분석 실패"
# 음성 특성 분석
acoustic_features = calculate_baseline_features((sr, y))
# 기존 분석 함수 호출
new_state, text, voice_result, text_result, prompt = analyze_voice(audio_data, state)
# 청신 단계의 누적된 기록들을 프롬프트에 통합
if "reflections" in new_state:
accumulated_emotions = []
accumulated_texts = []
for reflection in new_state["reflections"]:
accumulated_texts.append(reflection["text"])
if "sentiment" in reflection:
accumulated_emotions.append(reflection["sentiment"])
# 프롬프트 생성 시 누적된 감정과 텍스트 반영
enhanced_prompt = generate_detailed_prompt(
text=f"{text} || Previous reflections: {' | '.join(accumulated_texts)}",
emotions=map_acoustic_to_emotion(acoustic_features, new_state.get("baseline_features")),
text_sentiment={"label": ", ".join(accumulated_emotions), "score": 1.0}
)
return new_state, text, voice_result, text_result, enhanced_prompt, "분석 완료"
return new_state, text, voice_result, text_result, prompt, "분석 완료"
except Exception as e:
print(f"Voice analysis error: {str(e)}")
return state, "음성 분석 중 오류가 발생했습니다.", "", "", "", "분석 실패"
# 이벤트 연결
name_submit_btn.click(
fn=handle_name_submit,
inputs=[name_input, state],
outputs=[welcome_section, story_section, blessing_section, state]
)
continue_btn.click(
fn=handle_continue,
outputs=[story_section, welcome_section, blessing_section]
)
set_baseline_btn.click(
fn=handle_blessing_complete,
inputs=[baseline_audio, state],
outputs=[state, blessing_status, processing_status]
)
save_btn.click(
fn=handle_save_reflection,
inputs=[reflection_input, state],
outputs=[state, reflections_display]
)
clear_btn.click(
fn=lambda: None,
outputs=[voice_input]
)
analyze_btn.click(
fn=safe_analyze_voice,
inputs=[voice_input, state],
outputs=[state, transcribed_text, voice_emotion, text_emotion, final_prompt, status_display]
)
generate_btn.click(
fn=generate_image_from_prompt,
inputs=[final_prompt],
outputs=[result_image]
)
save_final_btn.click(
fn=handle_save_wish,
inputs=[final_reflection, state],
outputs=[blessing_status, wishes_display]
)
return app
@app.route('/static/')
def serve_static(path):
return send_from_directory('static', path)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/assets/')
def serve_assets(path):
return send_from_directory('assets', path)
@app.route('/manifest.json')
def serve_manifest():
return send_from_directory('static', 'manifest.json')
@app.route('/service-worker.js')
def serve_service_worker():
return send_from_directory('static', 'service-worker.js')
@app.route('/wishes/')
def serve_wishes(path):
return send_from_directory('data/wishes', path)
if __name__ == "__main__":
# 환경변수 로드
load_dotenv()
# 필요한 디렉토리 생성
required_dirs = [
'static',
'assets',
'data',
'generated_images',
'templates'
]
for directory in required_dirs:
os.makedirs(directory, exist_ok=True)
# PWA 파일 생성
create_pwa_files()
# 오디오 파일 체크
audio_path = os.path.join('assets', 'main_music.mp3')
if os.path.exists(audio_path):
print(f"✅ Audio file found: {audio_path}")
print(f" Size: {os.path.getsize(audio_path)} bytes")
print(f" Absolute path: {os.path.abspath(audio_path)}")
else:
print(f"❌ Audio file not found: {audio_path}")
# Gradio 인터페이스 생성
demo = create_interface()
# Gradio 앱 실행
demo.queue().launch(
server_name="0.0.0.0",
server_port=7860,
share=True,
debug=True,
show_error=True,
height=None,
width="100%",
favicon_path="static/icons/icon-72x72.png"
)
"""
main_image_html = f"""
"""
css = """
/* 전체 컨테이너 width 제한 */
.gradio-container {
margin: 0 auto !important;
max-width: 800px !important;
padding: 1rem !important;
}
/* 모바일 뷰 */
@media (max-width: 600px) {
.location-image-desktop {
display: none !important;
}
.location-image-mobile {
display: block !important;
width: 100%;
height: auto;
}
.mobile-logo {
display: none !important;
}
.desktop-logo {
display: block !important;
width: 100%;
height: auto;
max-width: 800px;
margin: 0 auto;
}
.main-image {
width: 100%;
max-width: 100%;
}
.gradio-container, .gradio-container *, body {
font-size: 17px !important;
}
.markdown-style h1,
.markdown-style h1 * {
font-size: 22px !important;
}
.markdown-style h2,
.markdown-style h2 * {
font-size: 20px !important;
}
.markdown-style h3,
.markdown-style h3 * {
font-size: 18px !important;
}
}
/* 데스크톱 뷰 (601px 이상) */
@media (min-width: 601px) {
.location-image-mobile {
display: none !important;
}
.location-image-desktop {
display: block !important;
width: 100%;
height: auto;
}
.main-image {
width: 600px;
max-width: 600px;
}
.container { padding: 10px !important; }
.gradio-row {
flex-direction: column !important;
gap: 10px !important;
}
.gradio-button {
width: 100% !important;
margin: 5px 0 !important;
min-height: 44px !important;
}
.gradio-textbox { width: 100% !important; }
.gradio-audio { width: 100% !important; }
.gradio-image { width: 100% !important; }
#audio-recorder { width: 100% !important; }
#result-image { width: 100% !important; }
.gradio-dataframe {
overflow-x: auto !important;
max-width: 100% !important;
}
.logo-container {
padding: 20px 0;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.desktop-logo {
display: none !important;
}
.mobile-logo {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 300px !important;
margin: 0 auto !important;
}
/* 데스크탑에서 2단 컬럼 레이아웃 보완 */
.gradio-row {
gap: 20px !important;
}
.gradio-row > .gradio-column {
flex: 1 !important;
min-width: 0 !important;
}
}
/* 전반적인 UI 개선 */
.gradio-button {
transition: all 0.3s ease;
border-radius: 8px !important;
}
.main-image-container {
width: 100%;
margin: 0 auto 2rem auto;
text-align: center;
}
.main-image {
width: 100%;
height: auto;
max-width: 100%;
display: block;
margin: 0 auto;
}
.gradio-button:active {
transform: scale(0.98);
}
/* 컴포넌트 간격 조정 */
.gradio-column > *:not(:last-child) {
margin-bottom: 1rem !important;
}
/* 데이터프레임 스타일링 */
.gradio-dataframe {
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}
.gradio-dataframe table {
font-size: 16px !important;
}
/* 오디오 플레이어 컨테이너 */
.audio-player-container {
max-width: 800px;
margin: 20px auto;
padding: 0 1rem;
}
.audio-player {
margin: 20px auto;
width: 100%;
max-width: 300px;
/* 탭 스타일링 */
.tabs {
max-width: 800px;
margin: 0 auto;
}
/* 마크다운 컨텐츠 */
.markdown-content {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
/* 기본 텍스트 크기 증가 */
.gradio-container, .gradio-container *, body {
font-size: 17px !important;
line-height: 1.7 !important;
}
/* 마크다운 기본 텍스트 */
.markdown-style {
font-size: 17px !important;
line-height: 1.7 !important;
}
/* 마크다운 제목 크기 조정 */
.markdown-style h1,
.markdown-style h1 * {
font-size: 22px !important;
line-height: 1.4 !important;
margin-bottom: 0.8em !important;
}
.markdown-style h2,
.markdown-style h2 * {
font-size: 20px !important;
line-height: 1.4 !important;
margin-bottom: 0.7em !important;
}
.markdown-style h3,
.markdown-style h3 * {
font-size: 18px !important;
line-height: 1.4 !important;
margin-bottom: 0.6em !important;
}
/* 입력 필드와 버튼 */
.gradio-textbox input,
.gradio-textbox textarea {
font-size: 17px !important;
line-height: 1.5 !important;
padding: 12px !important;
}
.gradio-button {
font-size: 17px !important;
padding: 12px 20px !important;
min-height: 48px !important;
}
/* 탭과 라벨 */
.tabs .tab-nav * {
font-size: 17px !important;
}
label, .label-text {
font-size: 17px !important;
margin-bottom: 8px !important;
}
/* 이미지 컨테이너 */
.gradio-image {
border-radius: 8px;
overflow: hidden;
max-width: 800px;
margin: 0 auto;
}
.blessing-status-box {
min-height: 200px !important;
max-height: 300px !important;
overflow-y: auto !important;
padding: 15px !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
background-color: #f8f9fa !important;
margin: 10px 0 !important;
}
.blessing-status-box {
min-height: 250px !important;
max-height: 400px !important;
overflow-y: auto !important;
padding: 20px !important;
border: 1px solid #ddd !important;
border-radius: 12px !important;
background-color: #f8f9fa !important;
margin: 15px 0 !important;
font-size: 16px !important;
line-height: 1.6 !important;
}
.blessing-status-box h3 {
color: #2a5d8f !important;
margin-bottom: 15px !important;
}
.blessing-status-box strong {
color: #4a90e2 !important;
}
}
/* Hugging Face 로고 숨기기 */
.div.gr-header {
display: none !important;
}
/* 다크 테마 기본 스타일 */
body {
margin: 0;
padding: 0;
background: #0b0f19 !important;
overflow-x: hidden;
position: relative;
min-height: 100vh;
color: #ffffff;
}
/* 메인 컨테이너 스타일링 */
.gradio-container {
margin: 0 auto !important;
padding: 0 !important;
max-width: 800px !important;
background: #0b0f19 !important;
min-height: 100vh;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
position: relative;
}
/* 상단 상태바 스타일 */
.status-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: env(safe-area-inset-top);
background: #000000;
z-index: 1000;
}
/* 하단 여백 조정 */
.footer-spacing {
height: env(safe-area-inset-bottom);
background: #0b0f19;
}
/* 앱 스크롤 동작 */
.app-scroll {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* 모든 탭 컨텐츠 배경색 */
.tabs > div {
background: #0b0f19 !important;
}
/* 입력 필드 스타일링 */
.gradio-textbox input,
.gradio-textbox textarea {
background: #1a1f2e !important;
color: #ffffff !important;
border: 1px solid #2a2f3e !important;
}
/* 버튼 스타일링 유지 */
.gradio-button {
background: #2a2f3e !important;
color: #ffffff !important;
border: none !important;
}
.gradio-button:hover {
background: #3a3f4e !important;
}
/* 데이터프레임/테이블 스타일링 */
.gradio-dataframe {
background: #1a1f2e !important;
color: #ffffff !important;
}
/* 모달과 팝업의 배경색 */
.modal-content {
background: #0b0f19 !important;
color: #ffffff !important;
}
/* iOS 상태바용 메타 태그 색상 */
@supports (-webkit-touch-callout: none) {
.status-bar {
height: max(env(safe-area-inset-top), 20px);
background: #000000;
}
}
/* 로딩 상태 표시 */
.processing-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(11, 15, 25, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #4a90e2;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.loading-text {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 18px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 버튼 비활성화 스타일 */
.gradio-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* 이미지 컨테이너 스타일 */
.location-image-container {
width: 100%;
max-width: 800px;
margin: 20px auto;
text-align: center;
}
.location-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 0 auto;
}
}
"""
with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
state = gr.State(value=initial_state)
processing_status = gr.State("")
with gr.Column(elem_classes="logo-container"):
gr.HTML(logo_html)
with gr.Tabs(selected=0) as tabs:
# 입장 탭 (축원 포함)
with gr.TabItem("입장") as tab_entrance:
gr.HTML(main_image_html)
# 1단계: 첫 화면
welcome_section = gr.Column(visible=True)
with welcome_section:
gr.Markdown(WELCOME_MESSAGE)
name_input = gr.Textbox(
label="이름을 알려주세요",
placeholder="이름을 입력해주세요",
interactive=True
)
name_submit_btn = gr.Button("축원의식 준비하기", variant="primary")
# 2단계: 세계관 설명
story_section = gr.Column(visible=False)
with story_section:
gr.Markdown(ONCHEON_STORY)
continue_btn = gr.Button("축원의식 시작하기", variant="primary")
# 3단계: 축원 의식
blessing_section = gr.Column(visible=False)
with blessing_section:
gr.Markdown("## 축원의식을 시작하겠습니다")
gr.Markdown("""
### 축원 문장을 읽어주세요:
'명짐 복짐 짊어지고 안가태평하시기를 비도발원 축원 드립니다'
""")
# 축원 문장 녹음하기
baseline_audio = gr.Audio(
label="축원 문장 녹음하기",
sources=["microphone"],
type="numpy",
streaming=False
)
# 분석 버튼을 바로 녹음기 아래에 배치
set_baseline_btn = gr.Button("축원문 분석하기", variant="primary")
# 상태 표시창 - 분석 결과 표시
blessing_status = gr.Markdown(
value="축원 문장을 녹음한 후 분석하기 버튼을 눌러주세요.",
elem_id="blessing-status",
elem_classes="blessing-status-box"
)
with gr.TabItem("청신") as tab_listen:
gr.Markdown("## 청신 - 신을 부르기 위한 정화 의식")
# 온천 이미지 추가
oncheon_image = encode_image_to_base64("static/oncheon.png")
gr.HTML(f"""
