updated

app.py

@@ -4,8 +4,21 @@ Author: Benhao Huang
 Create Date: 2023/11/19
 Description: Main Page of our Demo
 """
-
+import base64
 import streamlit as st
+
+import base64
+from pathlib import Path
+import tempfile
+
+
+def st_display_pdf(pdf_file):
+    with open(pdf_file, "rb") as f:
+        base64_pdf = base64.b64encode(f.read()).decode('utf-8')
+    pdf_display = f'<embed src="data:application/pdf;base64,{base64_pdf}" width="800" height="1000" type="application/pdf">'
+    st.markdown(pdf_display, unsafe_allow_html=True)
+
+
 # 设置页面配置
 st.set_page_config(
     page_title="AI 3603 Gomoku Project",
@@ -14,18 +27,20 @@ st.set_page_config(
     initial_sidebar_state="collapsed"
 )
 # 大标题
-st.write('<h1 style="text-align: center; color: black; font-weight: bold;">AI 3603 Gomoku Project 👋</h1>', unsafe_allow_html=True)
+st.write('<h1 style="text-align: center; color: black; font-weight: bold;">AI 3603 Gomoku Project 👋</h1>',
+         unsafe_allow_html=True)
 # 项目参与者
 st.write('<p style="text-align: center; font-size: 20px;"><a href="https://github.com" style="color: blue; font-weight: normal; margin-right: 20px; text-decoration: none;">Jiaxin Li</a> \
 <a href="https://github.com" style="color: blue; font-weight: normal; margin-right: 20px; text-decoration: none;">Junzhe Shen</a> \
-<a href="https://github.com" style="color: blue; font-weight: normal; text-decoration: none;">Benhao Huang</a></p>', unsafe_allow_html=True)
+<a href="https://github.com" style="color: blue; font-weight: normal; text-decoration: none;">Benhao Huang</a></p>',
+         unsafe_allow_html=True)
 # 标签
 st.markdown("""
 <div style="text-align: center;">
 <a href="#" style="background-color: #343a40; color: white; font-size: 15px; padding: 10px 15px; margin: 5px; border-radius: 15px; text-decoration: none;">📄 Report</a>
-<a href="#" style="background-color: #343a40; color: white; font-size: 15px; padding: 10px 15px; margin: 5px; border-radius: 15px; text-decoration: none;">💻 Code</a>
-<a href="#" style="background-color: #343a40; color: white; font-size: 15px; padding: 10px 15px; margin: 5px; border-radius: 15px; text-decoration: none;">🌐 Space</a>
-<a href="#" style="background-color: #343a40; color: white; font-size: 15px; padding: 10px 15px; margin: 5px; border-radius: 15px; text-decoration: none;">📊 PPT</a>
+<a href="https://github.com/Lijiaxin0111/AI_3603_BIGHOME" style="background-color: #343a40; color: white; font-size: 15px; padding: 10px 15px; margin: 5px; border-radius: 15px; text-decoration: none;">💻 Code</a>
+<a href="https://huggingface.co/spaces/Gomoku-Zero/Demo" style="background-color: #343a40; color: white; font-size: 15px; padding: 10px 15px; margin: 5px; border-radius: 15px; text-decoration: none;">🌐 Space</a>
+<a href="https://docs.google.com/presentation/d/1l3eLFqeGGKxvlbJYs5qi-ir1ZDifNMMebZILVgkYEoE/edit?usp=sharing" style="background-color: #343a40; color: white; font-size: 15px; padding: 10px 15px; margin: 5px; border-radius: 15px; text-decoration: none;">📊 PPT</a>
 </div>
 </br>
 </br>
@@ -37,27 +52,19 @@ it is traditionally played with Go pieces (black and white stones)
 on a Go board. It is straightforward and fun, but also full of strategy and challenge.
 Our project is aiming to apply Machine Learning techniques to build a powerful Gomoku AI.</div>
 """,
-unsafe_allow_html=True)
+            unsafe_allow_html=True)
 # 创新点和图片展示
-st.write("<h2 style='text-align: center; color: black; font-weight: bold;'>Innovations We Made 👍</h2>", unsafe_allow_html=True)
+st.write("<h2 style='text-align: center; color: black; font-weight: bold;'>Main Works 👍</h2>", unsafe_allow_html=True)
 col1, col2, col3 = st.columns(3)
 with col1:
-    st.image("assets/favicon_circle.png", width=50)  # 替换为你的图片 URL
-    st.caption("Innovation 1")
+    st.image("assets/model.png", width=800)  # 替换为你的图片 URL
+    st.caption("Gomoku Agent Based on Duel DQN")
 with col2:
-    st.image("assets/favicon_circle.png", width=50)  # 替换为你的图片 URL
-    st.caption("Innovation 2")
+    st.image("assets/data-collect.png", width=700)  # 替换为你的图片 URL
+    st.caption("Our Pipeline to Collect Training Data")
 with col3:
-    st.image("assets/favicon_circle.png", width=50)  # 替换为你的图片 URL
-    st.caption("Innovation 3")
+    st.image("assets/gomokubot.png", width=600)  # 替换为你的图片 URL
+    st.caption("Rule-Based GomokuBot")
 # 代码框架阐述和代码组件
-st.write("<h2 style='text-align: center; color: black; font-weight: bold;'>Code Structure 🛠️</h2>", unsafe_allow_html=True)
-st.code("""
-import os
-import streamlit as st
-def main():
-    # your code here
-if __name__ == "__main__":
-    main()
-""", language="python")
-st.markdown("---")
+st.write("<h2 style='text-align: center; color: black; font-weight: bold;'>Report </h2>", unsafe_allow_html=True)
+