app.py

"""
FileName: app.py
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",
    page_icon="👋",
    layout="wide",
    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('<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)
# 标签
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="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>
""", unsafe_allow_html=True)
# 项目介绍
st.markdown("""
<div style='color: red; font-size:18px'>(Better to clone this space locally to run games, the reaction time of the bot is much longer in huggingface's space) </div>
<div style='color: black; font-size:18px'>Gomoku is an abstract strategy board game. Also called <span style='color:red;'>Gobang</span> or <span style='color:red;'>Five in a Row</span>, 
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)
# 创新点和图片展示
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/model.png", width=800)  # 替换为你的图片 URL
    st.caption("Gomoku Agent Based on Duel DQN")
with col2:
    st.image("assets/data-collect.png", width=700)  # 替换为你的图片 URL
    st.caption("Our Pipeline to Collect Training Data")
with col3:
    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;'>Some Demos </h2>", unsafe_allow_html=True)

file1 = open("assets/multi-model.gif", "rb")
contents = file1.read()
data_url1 = base64.b64encode(contents).decode("utf-8")
file1.close()

file2 = open("assets/mercy.gif", "rb")
contents = file2.read()
data_url2 = base64.b64encode(contents).decode("utf-8")
file2.close()

file3 = open("assets/edge_blindness.gif", "rb")
contents = file3.read()
data_url3 = base64.b64encode(contents).decode("utf-8")
file3.close()

st.markdown(
    f"""<div style="display: flex; justify-content: space-between;">
        <img src="data:image/gif;base64,{data_url1}" alt="cat gif" style="width: 700px;">
        <img src="data:image/gif;base64,{data_url2}" alt="cat gif" style="width: 700px;">
        <img src="data:image/gif;base64,{data_url3}" alt="cat gif" style="width: 700px;">
    </div>""",
    unsafe_allow_html=True,
)