pengxiao/2026_DesignAI
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

sync(latex): 从 Word 同步第二章和附录内容

Browse Source 
- ch02: 第5节重写为"环境-智能体框架"，新增表2.1/2.2和图2.1
- ch01: 补充 Garrity 引用来源
- 全部附录(ap01-ap09)从 Word 重新转换，修复 \sub 等转换错误
- 新增 ch13 结语占位、上下篇分隔页

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
xiaopeng
2026-05-29 15:13:27 +08:00
parent a90f7adfa1
commit d5a6208e89
16 changed files with 1414 additions and 1273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
officefile/latex/appendices/ap04-web-tools.tex
+95 -75
View File
@@ -1,10 +1,10 @@
\chapter{附录4：网络、网站与在线可视化}
\chapter{网络、网站与在线可视化}
本附录介绍网络基础知识、网站搭建入门，以及在线数据可视化的工具与方法。
\subsection{网络基础知识}
\section{网络基础知识}
\subsubsection{互联网与Web}
\subsection{互联网与Web}
互联网（Internet）是由全球计算机互相连接而成的网络。Web（万维网）是运行在互联网上的信息系统，通过浏览器访问网页来获取信息。
@@ -12,8 +12,8 @@
{\def\LTcaptype{none} % do not increment counter
\begin{longtable}[]{@{}
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.1617}}
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.6553}}@{}}
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.1733}}
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.8000}}@{}}
\toprule\noalign{}
\begin{minipage}[b]{\linewidth}\raggedright
概念
@@ -33,28 +33,31 @@ API & 应用程序接口，程序之间交换数据的标准方式 \\
\end{longtable}
}
\subsubsection{前端与后端}
\subsection{前端与后端}
一个完整的Web应用由前端和后端两部分组成：
用户浏览器（前端） ←→ 服务器（后端） ←→ 数据库\\
HTML/CSS/JS Python/Node.js MySQL/PostgreSQL
\textbf{前端}：用户在浏览器中看到和操作的界面，使用 HTML、CSS、JavaScript 构建。
\textbf{前端}：用户在浏览器中看到和操作的界面，使用
HTML、CSS、JavaScript 构建。
\textbf{后端}：运行在服务器上的程序，处理数据逻辑、存储和检索，可以用 Python（Flask/Django/FastAPI）、Node.js、Java 等实现。
\textbf{后端}：运行在服务器上的程序，处理数据逻辑、存储和检索，可以用
Python（Flask/Django/FastAPI）、Node.js、Java 等实现。
\subsubsection{API与数据交互}\label{apiux4e0eux6570ux636eux4ea4ux4e92}
\subsection{API与数据交互}
API（Application Programming Interface）是程序之间通信的接口。在AI应用中，调用大语言模型、获取在线数据等操作都通过API完成。
API（Application Programming
Interface）是程序之间通信的接口。在AI应用中，调用大语言模型、获取在线数据等操作都通过API完成。
\textbf{RESTful API 基本概念}：
{\def\LTcaptype{none} % do not increment counter
\begin{longtable}[]{@{}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1134}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1185}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.2835}}@{}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1250}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1528}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3472}}@{}}
\toprule\noalign{}
\begin{minipage}[b]{\linewidth}\raggedright
方法
@@ -84,12 +87,15 @@ data = response.json() \emph{\# 将返回的JSON解析为Python字典}\\
print(data)\\
\strut \\
\emph{\# POST请求示例}\\
payload = \{"prompt": "设计一个现代风格的客厅", "model": "stable-diffusion"\}\\
response = requests.post("https://api.example.com/generate", json=payload)
payload = \{"prompt": "设计一个现代风格的客厅", "model":
"stable-diffusion"\}\\
response = requests.post("https://api.example.com/generate",
json=payload)
\subsubsection{JSON数据格式}\label{jsonux6570ux636eux683cux5f0f}
\subsection{JSON数据格式}
JSON（JavaScript Object Notation）是Web上最常用的数据交换格式，几乎所有API都使用JSON传递数据。
JSON（JavaScript Object
Notation）是Web上最常用的数据交换格式，几乎所有API都使用JSON传递数据。
\{\\
"model": "ResNet",\\
@@ -112,16 +118,16 @@ json\_str = json.dumps(data, indent=2)\\
\emph{\# JSON字符串 → Python字典}\\
parsed = json.loads(json\_str)
\subsection{网站搭建入门}
\section{网站搭建入门}
\subsubsection{静态网站与动态网站}
\subsection{静态网站与动态网站}
{\def\LTcaptype{none} % do not increment counter
\begin{longtable}[]{@{}
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.1187}}
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.3546}}
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.2633}}
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.2366}}@{}}
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.1222}}
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.3444}}
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.2556}}
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.2556}}@{}}
\toprule\noalign{}
\begin{minipage}[b]{\linewidth}\raggedright
类型
@@ -136,12 +142,14 @@ parsed = json.loads(json\_str)
\endhead
\bottomrule\noalign{}
\endlastfoot
静态网站 & 页面内容固定，无需服务器处理 & HTML/CSS/JS & 作品集、项目文档 \\
动态网站 & 内容根据请求动态生成 & 前端 + 后端 + 数据库 & 在线工具、数据平台 \\
静态网站 & 页面内容固定，无需服务器处理 & HTML/CSS/JS &
作品集、项目文档 \\
动态网站 & 内容根据请求动态生成 & 前端 + 后端 + 数据库 &
在线工具、数据平台 \\
\end{longtable}
}
\subsubsection{静态网站快速搭建}
\subsection{静态网站快速搭建}
对于设计专业的学生，最实用的方式是使用静态网站生成器搭建项目展示或文档站点。
@@ -174,9 +182,9 @@ mkdocs build
即可通过 https://username.github.io/repo 访问
\end{enumerate}
\subsubsection{HTML/CSS/JavaScript 速览}\label{htmlcssjavascript-ux901fux89c8}
\section{HTML/CSS/JavaScript 速览}
\paragraph{HTML：页面结构}\label{htmlux9875ux9762ux7ed3ux6784}
\subsubsection{HTML：页面结构}
\textless!DOCTYPE html\textgreater{}\\
\textless{}\textbf{html}\textgreater{}\\
@@ -187,11 +195,12 @@ mkdocs build
\textless{}\textbf{h1}\textgreater 设计作品集\textless/\textbf{h1}\textgreater{}\\
\textless{}\textbf{p}\textgreater 欢迎来到我的作品展示页面\textless/\textbf{p}\textgreater{}\\
\textless{}\textbf{img} src="design.jpg" alt="设计作品"\textgreater{}\\
\textless{}\textbf{a} href="https://example.com"\textgreater 了解更多\textless/\textbf{a}\textgreater{}\\
\textless{}\textbf{a}
href="https://example.com"\textgreater 了解更多\textless/\textbf{a}\textgreater{}\\
\textless/\textbf{body}\textgreater{}\\
\textless/\textbf{html}\textgreater{}
\paragraph{CSS：页面样式}\label{cssux9875ux9762ux6837ux5f0f}
\subsubsection{CSS：页面样式}
body \{\\
\textbf{font-family}: "Helvetica", sans-serif;\\
@@ -205,22 +214,23 @@ h1 \{\\
\textbf{text-align}: center;\\
\}
\paragraph{JavaScript：页面交互}\label{javascriptux9875ux9762ux4ea4ux4e92}
\subsubsection{JavaScript：页面交互}
\emph{// 点击按钮时显示消息}\\
document.getElementById("myButton").addEventListener("click", \textbf{function}() \{\\
document.getElementById("myButton").addEventListener("click",
\textbf{function}() \{\\
alert("按钮被点击了！");\\
\});
\subsubsection{前端框架简介}
\subsection{前端框架简介}
对于更复杂的Web应用，可以使用前端框架提升开发效率：
{\def\LTcaptype{none} % do not increment counter
\begin{longtable}[]{@{}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1107}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3071}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3379}}@{}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1667}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3750}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.4028}}@{}}
\toprule\noalign{}
\begin{minipage}[b]{\linewidth}\raggedright
框架
@@ -245,36 +255,34 @@ Streamlit & Python编写Web应用 & AI模型展示、数据分析仪表板 \\
\begin{enumerate}
\def\labelenumi{\arabic{enumi}.}
\tightlist
\item
title("图像分类演示")
\end{enumerate}
st.write("上传一张图片，AI将识别其中的内容")
\begin{verbatim}
\end{verbatim}
uploaded\_file = st.file\_uploader("选择图片", type={[}"jpg", "png"{]})
\textbf{if} uploaded\_file:
st.image(uploaded\_file, caption="上传的图片")
\begin{verbatim}
\begin{lstlisting}
st.write("分类结果：建筑（置信度 95%）")
\end{verbatim}
\end{lstlisting}
\emph{\# 安装并运行}\\
pip install streamlit\\
streamlit run app.py
\subsubsection{网站部署方式}
\subsection{网站部署方式}
{\def\LTcaptype{none} % do not increment counter
\begin{longtable}[]{@{}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3137}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.2835}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1185}}@{}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3889}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3472}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1528}}@{}}
\toprule\noalign{}
\begin{minipage}[b]{\linewidth}\raggedright
方式
@@ -294,13 +302,13 @@ Hugging Face Spaces & 适合AI模型演示 & 免费额度 \\
\end{longtable}
}
\subsection{在线数据可视化}
\section{在线数据可视化}
\subsubsection{为什么需要数据可视化}
\subsection{为什么需要数据可视化}
设计领域的AI研究和实践经常涉及数据展示：训练损失曲线、模型性能对比、空间数据分析结果等。数据可视化将抽象的数字转化为直观的图形，帮助理解和决策。
\subsubsection{Python可视化库}\label{pythonux53efux89c6ux5316ux5e93}
\subsection{Python可视化库}
Matplotlib：基础绑图
@@ -308,21 +316,27 @@ Matplotlib：基础绑图
\strut \\
\emph{\# 折线图}\\
epochs = range(1, 11)\\
train\_loss = {[}0.9, 0.6, 0.4, 0.25, 0.15, 0.1, 0.07, 0.05, 0.04, 0.03{]}\\
val\_loss = {[}0.85, 0.65, 0.45, 0.35, 0.28, 0.25, 0.24, 0.23, 0.23, 0.24{]}\\
train\_loss = {[}0.9, 0.6, 0.4, 0.25, 0.15, 0.1, 0.07, 0.05, 0.04,
0.03{]}\\
val\_loss = {[}0.85, 0.65, 0.45, 0.35, 0.28, 0.25, 0.24, 0.23, 0.23,
0.24{]}\\
\strut \\
plt.figure(figsize=(8, 5))\\
plt.plot(epochs, train\_loss, \textquotesingle b-o\textquotesingle, label=\textquotesingle Train Loss\textquotesingle)\\
plt.plot(epochs, val\_loss, \textquotesingle r-s\textquotesingle, label=\textquotesingle Val Loss\textquotesingle)\\
plt.plot(epochs, train\_loss, \textquotesingle b-o\textquotesingle,
label=\textquotesingle Train Loss\textquotesingle)\\
plt.plot(epochs, val\_loss, \textquotesingle r-s\textquotesingle,
label=\textquotesingle Val Loss\textquotesingle)\\
plt.xlabel(\textquotesingle Epoch\textquotesingle)\\
plt.ylabel(\textquotesingle Loss\textquotesingle)\\
plt.title(\textquotesingle Training vs Validation Loss\textquotesingle)\\
plt.title(\textquotesingle Training vs Validation
Loss\textquotesingle)\\
plt.legend()\\
plt.grid(True, alpha=0.3)\\
plt.savefig(\textquotesingle loss\_comparison.png\textquotesingle, dpi=150, bbox\_inches=\textquotesingle tight\textquotesingle)\\
plt.savefig(\textquotesingle loss\_comparison.png\textquotesingle,
dpi=150, bbox\_inches=\textquotesingle tight\textquotesingle)\\
plt.show()
\paragraph{Seaborn：统计可视化}\label{seabornux7edfux8ba1ux53efux89c6ux5316}
\subsubsection{Seaborn：统计可视化}
基于Matplotlib，提供更美观的统计图表。
@@ -333,11 +347,13 @@ plt.show()
data = np.random.randn(10, 10)\\
corr = np.corrcoef(data)\\
\strut \\
sns.heatmap(corr, annot=True, cmap=\textquotesingle coolwarm\textquotesingle)\\
plt.title(\textquotesingle Feature Correlation Heatmap\textquotesingle)\\
sns.heatmap(corr, annot=True,
cmap=\textquotesingle coolwarm\textquotesingle)\\
plt.title(\textquotesingle Feature Correlation
Heatmap\textquotesingle)\\
plt.savefig(\textquotesingle heatmap.png\textquotesingle, dpi=150)
\paragraph{Plotly：交互式可视化}\label{plotlyux4ea4ux4e92ux5f0fux53efux89c6ux5316}
\subsubsection{Plotly：交互式可视化}
支持鼠标悬停、缩放、导出等交互操作，适合Web展示。
@@ -351,15 +367,15 @@ title="Iris Dataset Scatter Plot")\\
fig.write\_html("scatter.html") \emph{\# 导出为网页}\\
fig.show()
\subsubsection{在线可视化工具}
\subsection{在线可视化工具}
无需编程，通过网页界面即可创建可视化：
{\def\LTcaptype{none} % do not increment counter
\begin{longtable}[]{@{}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1646}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3405}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.2036}}@{}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1667}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3039}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.5098}}@{}}
\toprule\noalign{}
\begin{minipage}[b]{\linewidth}\raggedright
工具
@@ -372,23 +388,28 @@ fig.show()
\endhead
\bottomrule\noalign{}
\endlastfoot
Observable & JavaScript驱动的交互式笔记本 & \href{https://observablehq.com/}{observablehq.com} \\
Flourish & 拖拽式数据可视化，模板丰富 & \href{https://flourish.studio/}{flourish.studio} \\
Datawrapper & 适合制作新闻级图表 & \href{https://www.datawrapper.de/}{datawrapper.de} \\
Tableau Public & 强大的商业智能可视化 & \href{https://public.tableau.com/}{public.tableau.com} \\
ECharts & 百度开源的交互式图表库 & \href{https://echarts.apache.org/}{echarts.apache.org} \\
Observable & JavaScript驱动的交互式笔记本 &
\href{https://observablehq.com/}{observablehq.com} \\
Flourish & 拖拽式数据可视化，模板丰富 &
\href{https://flourish.studio/}{flourish.studio} \\
Datawrapper & 适合制作新闻级图表 &
\href{https://www.datawrapper.de/}{datawrapper.de} \\
Tableau Public & 强大的商业智能可视化 &
\href{https://public.tableau.com/}{public.tableau.com} \\
ECharts & 百度开源的交互式图表库 &
\href{https://echarts.apache.org/}{echarts.apache.org} \\
\end{longtable}
}
\subsubsection{地理空间可视化}
\subsection{地理空间可视化}
设计领域经常涉及地理和空间数据的可视化：
{\def\LTcaptype{none} % do not increment counter
\begin{longtable}[]{@{}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1113}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3837}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.2364}}@{}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1667}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.4583}}
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.2917}}@{}}
\toprule\noalign{}
\begin{minipage}[b]{\linewidth}\raggedright
工具
@@ -425,12 +446,12 @@ icon=folium.Icon(color="blue", icon="info-sign")\\
\emph{\# 保存为网页}\\
m.save("map.html")
\subsubsection{可视化设计原则}
\subsection{可视化设计原则}
{\def\LTcaptype{none} % do not increment counter
\begin{longtable}[]{@{}
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.2361}}
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.6363}}@{}}
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.2838}}
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.6892}}@{}}
\toprule\noalign{}
\begin{minipage}[b]{\linewidth}\raggedright
原则
@@ -448,4 +469,3 @@ m.save("map.html")
交互增强 & 在线可视化支持筛选、缩放、悬停查看详情 \\
\end{longtable}
}