css

app.py

@@ -55,6 +55,20 @@ def respond(
 """
 For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
 """
+
+# カスタムCSS
+custom_css = """
+#chatbox {
+    height: 600px; /* 高さを調整 */
+    overflow-y: auto; /* 縦方向のスクロールを可能に */
+}
+
+.gradio-chatbot .message {
+    max-width: 80%; /* チャットボックスの横幅調整 */
+    margin-bottom: 20px; /* メッセージ間のマージン調整 */
+}
+"""
+
 demo = gr.ChatInterface(
     respond,
     additional_inputs=[
@@ -74,12 +88,11 @@ demo = gr.ChatInterface(
     ],
 )
 description = """
-### Tanuki-8x8B-dpo-v1.0との会話(期間限定での公開)
-- 人工知能開発のため､入出力データは著作権フリー(CC0)で公開予定ですので､ご注意ください｡
-- 著作物､個人情報､機密情報､誹謗中傷などのデータを入力しないでください｡
+### [Tanuki-8x8B-dpo-v1.0](https://huggingface.co/weblab-GENIAC/Tanuki-8x8B-dpo-v1.0)との会話(期間限定での公開)
+- 人工知能開発のため､入出力データは著作権フリー(CC0)で公開予定ですので､ご注意ください｡著作物､個人情報､機密情報､誹謗中傷などのデータを入力しないでください｡
 """
 # グループ化して表示
-with gr.Blocks() as interface:
+with gr.Blocks(css=custom_css) as interface:
     # 説明文を表示
     gr.Markdown(description)
     # ChatInterfaceを表示