Update app.py

app.py

@@ -1444,7 +1444,127 @@ def show_tab_3():
     return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
 
 
-with gr.Blocks(title="パフォーマンス評価") as demo:
+with gr.Blocks(title="パフォーマンス評価", theme=gr.themes.Soft(), css="""footer {visibility: hidden;} #header {display: flex; justify-content: space-between; align-items: center; font-size: 24px; font-weight: bold;} #logo {width: 50px; height: 50px;} 
+    .gradio-container {
+        background-color: #f8f9fa;
+        /*width: 100%;
+        height: 100%;
+        background-image: url('https://images.unsplash.com/photo-1527181152855-fc03fc7949c8?auto=format&w=1000&dpr=2');
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;*/
+    }
+    .main {
+        background-color: #f8f9fa;
+    }
+    .logo-container {
+        position: absolute;
+        top: 1px;
+        left: 20px;
+        z-index: 1000;
+    }
+    .logo-container img {
+        height: 30px;
+        width: auto;
+    }
+    .title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: #2c3e50;
+        text-align: center;
+        margin-bottom: 1.5rem;
+    }
+    .subtitle {
+        font-size: 0.1rem;
+        color: #7f8c8d;
+        text-align: center;
+        margin-bottom: 2rem;
+    }
+               
+    .rcard {
+        background: #000055;
+        border-radius: 15px;
+        padding: 2rem;
+        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        margin-bottom: 1rem;
+        height: 650px;
+        overflow: hidden;
+    }
+               
+    .card {
+        background: white;
+        border-radius: 15px;
+        padding: 2rem;
+        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        margin-bottom: 1rem;
+    }
+    .success-message {
+        color: #27ae60;
+        text-align: center;
+        margin-top: 1rem;
+    }
+    .error-message {
+        color: #e74c3c;
+        text-align: center;
+        margin-top: 1rem;
+    }
+    .footer {
+        text-align: center;
+        margin-top: 1rem;
+        color: #95a5a6;
+        font-size: 0.8rem;
+    }
+    .avatar {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        margin: 0 auto 1rem auto;
+        display: block;
+        object-fit: cover;
+        border: 3px solid #4a90e2;
+    }
+    
+    .avatar:hover {
+        transform: scale(1.2);
+        border: 3px solid #4a90e2;
+    }
+    .gr-button {
+        width: 100%;
+        border-radius: 10px;
+        padding: 10px;
+        background-color: #4a90e2;
+        color: white;
+        border: none;
+        font-weight: 500;
+        transition: all 0.3s;
+    }
+    .gr-button:hover {
+        background-color: #357abd;
+        color: lightyellow;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    }
+    .gr-textinput, .gr-textbox {
+        border-radius: 10px;
+        padding: 10px;
+        border: 1px solid #ced4da;
+    }
+    .my-custom-button {
+        background-color: transparent !important; /* 緑色 */
+        color: black !important;
+        padding: 10px 20px !important;
+        border: solid thin black !important;
+        border-radius: 5px !important;
+        cursor: pointer !important;
+        font-size: 16px !important;
+        width: 100%;
+        transition: background-color 0.3s ease !important;
+    }
+
+    .my-custom-button:hover {
+        background-color: #fff5ee !important; /* ホバー時の色 */
+    }
+""") as demo:
     gr.HTML('<div id="header"><span>🔖 パフォーマンス評価</span><img id="logo" src="https://www.ryhintl.com/images/ryhlogo/ryhlogo.png" width="64" height="64" alt="Logo"></div>')
 
     # State variables
@@ -1486,7 +1606,7 @@ with gr.Blocks(title="パフォーマンス評価") as demo:
             logout_btn = gr.Button("ログアウト")
             
             with gr.Row(visible=True) as filecomp:
-                gr.Textbox(label="サンプル", lines=10, value="""
+                gr.Textbox(label="サンプル", show_copy_button=True, lines=10, value="""
 パフォーマンスレポート
 
 被評価者氏名	田中 太郎
@@ -1640,6 +1760,7 @@ with gr.Blocks(title="パフォーマンス評価") as demo:
         output_text = gr.Textbox(
             label="プレ・レビュー・レポート",
             lines=10,
+            show_copy_button=True,
             interactive=False # Allow user to type
         )
 
@@ -1661,125 +1782,4 @@ with gr.Blocks(title="パフォーマンス評価") as demo:
         outputs=[signin,query,smry,b2]
     )
     
-demo.launch(favicon_path="favicon.ico", theme=gr.themes.Soft(), css="""footer {visibility: hidden;} #header {display: flex; justify-content: space-between; align-items: center; font-size: 24px; font-weight: bold;} #logo {width: 50px; height: 50px;} 
-    .gradio-container {
-        background-color: #f8f9fa;
-        /*width: 100%;
-        height: 100%;
-        background-image: url('https://images.unsplash.com/photo-1527181152855-fc03fc7949c8?auto=format&w=1000&dpr=2');
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center center;*/
-    }
-    .main {
-        background-color: #f8f9fa;
-    }
-    .logo-container {
-        position: absolute;
-        top: 1px;
-        left: 20px;
-        z-index: 1000;
-    }
-    .logo-container img {
-        height: 30px;
-        width: auto;
-    }
-    .title {
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: #2c3e50;
-        text-align: center;
-        margin-bottom: 1.5rem;
-    }
-    .subtitle {
-        font-size: 0.1rem;
-        color: #7f8c8d;
-        text-align: center;
-        margin-bottom: 2rem;
-    }
-               
-    .rcard {
-        background: #000055;
-        border-radius: 15px;
-        padding: 2rem;
-        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-        margin-bottom: 1rem;
-        height: 650px;
-        overflow: hidden;
-    }
-               
-    .card {
-        background: white;
-        border-radius: 15px;
-        padding: 2rem;
-        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-        margin-bottom: 1rem;
-    }
-    .success-message {
-        color: #27ae60;
-        text-align: center;
-        margin-top: 1rem;
-    }
-    .error-message {
-        color: #e74c3c;
-        text-align: center;
-        margin-top: 1rem;
-    }
-    .footer {
-        text-align: center;
-        margin-top: 1rem;
-        color: #95a5a6;
-        font-size: 0.8rem;
-    }
-    .avatar {
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-        margin: 0 auto 1rem auto;
-        display: block;
-        object-fit: cover;
-        border: 3px solid #4a90e2;
-    }
-    
-    .avatar:hover {
-        transform: scale(1.2);
-        border: 3px solid #4a90e2;
-    }
-    .gr-button {
-        width: 100%;
-        border-radius: 10px;
-        padding: 10px;
-        background-color: #4a90e2;
-        color: white;
-        border: none;
-        font-weight: 500;
-        transition: all 0.3s;
-    }
-    .gr-button:hover {
-        background-color: #357abd;
-        color: lightyellow;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    }
-    .gr-textinput, .gr-textbox {
-        border-radius: 10px;
-        padding: 10px;
-        border: 1px solid #ced4da;
-    }
-    .my-custom-button {
-        background-color: transparent !important; /* 緑色 */
-        color: black !important;
-        padding: 10px 20px !important;
-        border: solid thin black !important;
-        border-radius: 5px !important;
-        cursor: pointer !important;
-        font-size: 16px !important;
-        width: 100%;
-        transition: background-color 0.3s ease !important;
-    }
-
-    .my-custom-button:hover {
-        background-color: #fff5ee !important; /* ホバー時の色 */
-    }
-""")
-
+demo.launch(favicon_path="favicon.ico")