加入了web.py，但是server还没实现

src/globals.py

@@ -3,7 +3,7 @@ IMAGE_MEAN = 0.9545467
 IMAGE_STD  = 0.15394445
 
 
-# =========================   TeXify模型用的参数   ============================= #
+# =========================   ocr模型用的参数   ============================= #
 
 # 输入图片的最大最小的宽和高
 MIN_HEIGHT = 32
@@ -12,7 +12,7 @@ MIN_WIDTH  = 32
 MAX_WIDTH  = 1280
 # LaTex-OCR中分别是 32、192、32、672
 
-# TeXify模型所用数据集中，图片所用的Density渲染值
+# ocr模型所用数据集中，图片所用的Density渲染值（实际上图片用的渲染Density不是80，而是100）
 TEXIFY_INPUT_DENSITY  = 80    
 
 # ============================================================================= #
@@ -25,7 +25,7 @@ RESIZER_INPUT_DENSITY  = 200
 
 LABEL_RATIO   = 1.0 * TEXIFY_INPUT_DENSITY / RESIZER_INPUT_DENSITY
 
-NUM_CLASSES   = 1      # 模型使用回归预测（最后会接一个sigmoid，预测0～1）
+NUM_CLASSES   = 1      # 模型使用回归预测
 NUM_CHANNELS  = 1      # 输入单通道图片（灰度图）
 
 # Resizer在训练时，图片所固定的的大小

src/web.py

@@ -1,33 +1,94 @@
 import streamlit as st
-import time
+import io
+import base64
+import requests
 
-from stqdm import stqdm
+from PIL import Image
 
+def post_image(server_url, img_rb):
+    response = requests.post(server_url, files={'image': img_rb})
+    return response.text
+
+
+#  ============================     pages      =============================== #
 # 使用 Markdown 和 HTML 将标题居中
-with st.columns(3)[1]:
-    st.title(":rainbow[TexTeller] :sparkles:")
+# with st.columns(3)[1]:
+#     st.title(":rainbow[TexTeller] :sparkles:")
+
+# HTML字符串，包含内联CSS用于彩色和居中
+# html_string = """
+#     <h1 style="color: orange; text-align: center;">
+#         ✨ TexTeller ✨
+#     </h1>
+# """
+html_string = """
+    <h1 style="color: orange; text-align: center;">
+        🔥👁️ OCR
+    </h1>
+"""
+st.markdown(html_string, unsafe_allow_html=True)
+
+
 
 if "start" not in st.session_state:
     st.balloons()
     st.session_state["start"] = 1
 
+# 上传图片
 uploaded_file = st.file_uploader("",type=['jpg', 'png'])
-st.divider()
 
+# 显示上传图片
 if uploaded_file:
-    st.image(uploaded_file, caption="Input image")
+    # 打开上传图片
+    img = Image.open(uploaded_file)
+    # st.image(uploaded_file, caption=f"Input image ({img.height}✖️{img.width})")
 
-for _ in stqdm(range(10), st_container=st.sidebar):
-    time.sleep(0.1)
+    # 将 BytesIO 对象转换为 Base64 编码
+    def get_image_base64(img_file):
+        buffered = io.BytesIO()
+        img_file.seek(0)  # 重置文件指针位置
+        img = Image.open(img_file)
+        img.save(buffered, format="PNG")
+        return base64.b64encode(buffered.getvalue()).decode()
 
-with st.spinner('Wait for it...'):
-    time.sleep(5)
+    img_base64 = get_image_base64(uploaded_file)
 
+    # 使用Markdown和HTML创建一个居中的图片容器
+    st.markdown(f"""
+    <style>
+    .centered-container {{
+        text-align: center;
+    }}
+    .centered-image {{
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 700px;
+    }}
+    </style>
+    <div class="centered-container">
+        <img src="data:image/png;base64,{img_base64}" class="centered-image" alt="Input image">
+        <p style="color:gray;">Input image ({img.height}✖️{img.width})</p>
+    </div>
+    """, unsafe_allow_html=True)
+
+    st.write("")
+    st.write("")
+
+    # 预测
+    with st.spinner("Predicting..."):
+        # 预测结果
+        server_url = 'http://localhost:8000/'
+        uploaded_file.seek(0)
+        TeXTeller_result = post_image(server_url, uploaded_file)
+        TeXTeller_result = r"\begin{align*}" + '\n' + TeXTeller_result + '\n' + r'\end{align*}'
+        # tab1, tab2 = st.tabs(["✨TeXTeller✨", "pix2tex:gray[(9.6K⭐)️]"])
+        tab1, tab2 = st.tabs(["🔥👁️", "pix2tex:gray[(9.6K⭐)️]"])
+        # with st.container(border=True):
+        with tab1:
+            st.latex(TeXTeller_result)
+            st.write("")
+            st.code(TeXTeller_result, language='latex')
             st.success('Done!')
 
-
-with st.empty():
-    for seconds in range(60):
-        st.write(f"⏳ {seconds} seconds have passed")
-        time.sleep(1)
-    st.write("✔️ 1 minute over!")
+#  ============================     pages      =============================== #