<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Junfei Zhan's Website</title><link>https://junfei-z.github.io/</link><atom:link href="https://junfei-z.github.io/index.xml" rel="self" type="application/rss+xml"/><description>Junfei Zhan's Website</description><generator>Hugo Blox Builder (https://hugoblox.com)</generator><language>en-us</language><lastBuildDate>Mon, 24 Oct 2022 00:00:00 +0000</lastBuildDate><image><url>https://junfei-z.github.io/media/icon_hu70bcee51a3cd7a7338014254a2e0c844_1401285_512x512_fill_lanczos_center_3.png</url><title>Junfei Zhan's Website</title><link>https://junfei-z.github.io/</link></image><item><title>Example Talk</title><link>https://junfei-z.github.io/event/example/</link><pubDate>Sat, 01 Jun 2030 13:00:00 +0000</pubDate><guid>https://junfei-z.github.io/event/example/</guid><description>&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Click on the &lt;strong>Slides&lt;/strong> button above to view the built-in slides feature.&lt;/span>
&lt;/div>
&lt;p>Slides can be added in a few ways:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Create&lt;/strong> slides using Hugo Blox Builder&amp;rsquo;s &lt;a href="https://docs.hugoblox.com/reference/content-types/">&lt;em>Slides&lt;/em>&lt;/a> feature and link using &lt;code>slides&lt;/code> parameter in the front matter of the talk file&lt;/li>
&lt;li>&lt;strong>Upload&lt;/strong> an existing slide deck to &lt;code>static/&lt;/code> and link using &lt;code>url_slides&lt;/code> parameter in the front matter of the talk file&lt;/li>
&lt;li>&lt;strong>Embed&lt;/strong> your slides (e.g. Google Slides) or presentation video on this page using &lt;a href="https://docs.hugoblox.com/reference/markdown/">shortcodes&lt;/a>.&lt;/li>
&lt;/ul>
&lt;p>Further event details, including &lt;a href="https://docs.hugoblox.com/reference/markdown/">page elements&lt;/a> such as image galleries, can be added to the body of this page.&lt;/p></description></item><item><title>Example Talk</title><link>https://junfei-z.github.io/zh/event/example/</link><pubDate>Sat, 01 Jun 2030 13:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/event/example/</guid><description>&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Click on the &lt;strong>Slides&lt;/strong> button above to view the built-in slides feature.&lt;/span>
&lt;/div>
&lt;p>Slides can be added in a few ways:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Create&lt;/strong> slides using Hugo Blox Builder&amp;rsquo;s &lt;a href="https://docs.hugoblox.com/reference/content-types/">&lt;em>Slides&lt;/em>&lt;/a> feature and link using &lt;code>slides&lt;/code> parameter in the front matter of the talk file&lt;/li>
&lt;li>&lt;strong>Upload&lt;/strong> an existing slide deck to &lt;code>static/&lt;/code> and link using &lt;code>url_slides&lt;/code> parameter in the front matter of the talk file&lt;/li>
&lt;li>&lt;strong>Embed&lt;/strong> your slides (e.g. Google Slides) or presentation video on this page using &lt;a href="https://docs.hugoblox.com/reference/markdown/">shortcodes&lt;/a>.&lt;/li>
&lt;/ul>
&lt;p>Further event details, including &lt;a href="https://docs.hugoblox.com/reference/markdown/">page elements&lt;/a> such as image galleries, can be added to the body of this page.&lt;/p></description></item><item><title>Scalable Node-Level Vaccine Allocation on Contact Networks: Bridging Optimal Control and Reinforcement Learning</title><link>https://junfei-z.github.io/research/scalable-node-level-vaccine-allocation-on-contact-networks/</link><pubDate>Thu, 23 Apr 2026 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/research/scalable-node-level-vaccine-allocation-on-contact-networks/</guid><description>&lt;a href="https://junfei-z.github.io/vaccine_rl/" target="_blank">
&lt;img src="https://img.shields.io/badge/Interactive%20Demo-Open-2563eb?logo=googlechrome&amp;logoColor=white" alt="Demo">
&lt;/a>
&lt;p>📄 &lt;em>Master&amp;rsquo;s Thesis, University of Pennsylvania (2026). Advisor: Prof. Saswati Sarkar.&lt;/em>&lt;/p>
&lt;p>In the first weeks of a pandemic, vaccines must be allocated across a large, heterogeneous population under a tight daily dose budget and over a horizon of weeks to months. A deployable policy must name specific individuals — not group-level proportions — and cope with three structural difficulties: sequential decisions over a long horizon with a delayed reward signal, a combinatorial daily action space of size $\binom{N}{K}$, and individual network position that matters as much as demographic group.&lt;/p>
&lt;h2 id="interactive-demo">Interactive Demo&lt;/h2>
&lt;p>The companion demo walks through the thesis visually:&lt;/p>
&lt;ol>
&lt;li>&lt;strong>Three-group population model&lt;/strong> — baseline (X), high-risk elderly (Y), and high-contact hubs (Z), each with group-specific symptomatic, hospitalisation, and case-fatality rates.&lt;/li>
&lt;li>&lt;strong>10-compartment SEPAILHRVD disease model&lt;/strong> — latent, pre-symptomatic, asymptomatic, symptomatic, late-stage, hospitalised, recovered, vaccinated, and dead.&lt;/li>
&lt;li>&lt;strong>Barabási–Albert network construction&lt;/strong> — watch preferential attachment grow a scale-free contact graph and the characteristic power-law degree tail emerge.&lt;/li>
&lt;li>&lt;strong>Stochastic simulator&lt;/strong> — seed infections in any group mix and watch an unvaccinated outbreak unfold day by day, reporting cumulative deaths as the no-intervention baseline.&lt;/li>
&lt;li>&lt;strong>Method comparison&lt;/strong> &lt;em>(coming soon)&lt;/em> — OC-Random, OC-high, Naive RL, and Node RL on identical seeds.&lt;/li>
&lt;/ol>
&lt;p>👉 &lt;a href="https://junfei-z.github.io/vaccine_rl/">&lt;strong>Open the interactive demo&lt;/strong>&lt;/a>&lt;/p>
&lt;h2 id="contributions">Contributions&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>C1 — Stochastic node-level simulator&lt;/strong>: a high-fidelity environment integrating an explicit Barabási–Albert contact network with a 10-compartment SEPAILHRVD model, capturing intrinsic stochasticity of infection events and individual-level risk heterogeneity.&lt;/li>
&lt;li>&lt;strong>C2 — OC-high&lt;/strong>: augments principled group-level optimal control with a high-degree-first intra-group heuristic, bridging aggregate policy and individual action.&lt;/li>
&lt;li>&lt;strong>C3 — Node RL&lt;/strong>: an end-to-end actor–critic with a shared-parameter scoring MLP and Gumbel-Top-$K$ reparameterised sampling, yielding $O(K)$ gradient variance versus $\Theta(N)$ for independent Bernoulli baselines.&lt;/li>
&lt;li>&lt;strong>C4 — Regime map&lt;/strong>: systematic benchmarking across population size, horizon, and initial-infection ratio identifying when each method is preferable — and when the additional compute of node-level RL is justified.&lt;/li>
&lt;/ul>
&lt;h2 id="headline-findings">Headline Findings&lt;/h2>
&lt;ul>
&lt;li>OC-high matches or beats Node RL in most regimes at roughly &lt;strong>two orders of magnitude&lt;/strong> less preparation cost.&lt;/li>
&lt;li>Node RL&amp;rsquo;s advantage is real but &lt;strong>confined&lt;/strong> to short horizons and hub-heavy initial infections, where the mean-field assumption underlying OC-high structurally breaks down.&lt;/li>
&lt;li>The intra-group high-degree heuristic alone accounts for a &lt;strong>5–10% reduction in deaths&lt;/strong> on average, comparable to the contribution of the group-level OC rates themselves.&lt;/li>
&lt;/ul></description></item><item><title>Daily Productivity Tracker</title><link>https://junfei-z.github.io/project/4_diary/</link><pubDate>Sun, 05 Apr 2026 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/project/4_diary/</guid><description>&lt;p>A personal daily productivity and diary tracker with a beautiful, animated UI. Features include a unified work clock, task management, daily theme editing, and an immersive full-screen zen mode with time-aware scenes (sunrise, daytime clouds, sunset, starry night), celestial body animations, and procedurally generated ambient sounds (rain, wheat fields, summer frogs, fireplace).&lt;/p>
&lt;p>Key features:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Zen Focus Mode&lt;/strong>: Full-screen immersive environment with real-time clock, nature scenery that matches the actual time of day&lt;/li>
&lt;li>&lt;strong>Ambient Sound Engine&lt;/strong>: Four procedurally generated sounds using Web Audio API — no external audio files needed&lt;/li>
&lt;li>&lt;strong>Task Management&lt;/strong>: Create, track, and focus on individual tasks with dedicated focus mode&lt;/li>
&lt;li>&lt;strong>Bilingual Support&lt;/strong>: Chinese/English toggle with full i18n&lt;/li>
&lt;li>&lt;strong>Data Persistence&lt;/strong>: All data saved locally via localStorage&lt;/li>
&lt;/ul></description></item><item><title>每日效率追踪器</title><link>https://junfei-z.github.io/zh/project/4_diary/</link><pubDate>Sun, 05 Apr 2026 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/project/4_diary/</guid><description>&lt;p>一款拥有精美动画界面的个人每日效率与日记追踪工具。功能包括统一工作计时器、任务管理、每日主题编辑，以及沉浸式全屏禅模式——具备随时间变化的场景（日出、白天云朵、日落、星空夜晚）、天体动画和程序化生成的环境音效（雨声、麦田、夏蛙、壁炉）。&lt;/p>
&lt;p>主要功能：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>禅定专注模式&lt;/strong>：全屏沉浸式环境，带有实时时钟和与实际时间同步的自然风景&lt;/li>
&lt;li>&lt;strong>环境音效引擎&lt;/strong>：使用 Web Audio API 程序化生成四种音效，无需外部音频文件&lt;/li>
&lt;li>&lt;strong>任务管理&lt;/strong>：创建、跟踪并专注于单个任务，提供专属专注模式&lt;/li>
&lt;li>&lt;strong>双语支持&lt;/strong>：中英文切换，完整 i18n 支持&lt;/li>
&lt;li>&lt;strong>数据持久化&lt;/strong>：所有数据通过 localStorage 本地保存&lt;/li>
&lt;/ul></description></item><item><title>Seeing is Free, Speaking is Not: Uncovering the True Energy Bottleneck in Edge VLM Inference</title><link>https://junfei-z.github.io/research/seeing-is-free-speaking-is-not/</link><pubDate>Fri, 27 Mar 2026 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/research/seeing-is-free-speaking-is-not/</guid><description>&lt;p>Vision-Language Models (VLMs) are the perceptual backbone of embodied AI, but their energy footprint on edge hardware remains poorly understood. Existing efficiency efforts focus predominantly on reducing visual tokens, implicitly treating visual processing as the dominant energy cost. We overturn this implicit assumption through the &lt;strong>first systematic energy profiling&lt;/strong> of on-device VLM inference, spanning five models across three architecture families, four input resolutions, and two hardware platforms (NVIDIA RTX 3070 and Jetson Orin NX).&lt;/p>
&lt;h2 id="key-findings">Key Findings&lt;/h2>
&lt;p>Our analysis yields three core findings:&lt;/p>
&lt;h3 id="1-power-is-a-model-fingerprint">1. Power is a Model Fingerprint&lt;/h3>
&lt;p>Average inference power is a &lt;strong>model-intrinsic constant&lt;/strong>, invariant to input resolution, image complexity, and prompt type, with less than 5% variation across all conditions. This means that all energy variation across inputs must arise from variation in &lt;strong>inference time&lt;/strong>, not from variation in power draw.&lt;/p>
&lt;h3 id="2-decode-dominates-energy">2. Decode Dominates Energy&lt;/h3>
&lt;p>Autoregressive decoding accounts for &lt;strong>86 to 97% of total energy&lt;/strong>. Each output token costs &lt;strong>11 to 39x more&lt;/strong> wall-clock time than each input token due to the compute-bound and memory-bound asymmetry between prefill and decode phases. Output token count is the dominant driver of both latency and energy.&lt;/p>
&lt;h3 id="3-the-visual-token-pruning-illusion">3. The Visual Token Pruning Illusion&lt;/h3>
&lt;p>Even removing &lt;strong>all visual tokens&lt;/strong> saves at most &lt;strong>10% of total energy&lt;/strong> for fixed-token models. In contrast, controlling output length by 50% saves up to &lt;strong>97%&lt;/strong>. These findings expose a fundamental limitation of visual token pruning: it targets prefill, which is already a minority of total energy.&lt;/p>
&lt;h2 id="contributions">Contributions&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>Energy decomposition&lt;/strong> into prefill vs. decode phases, showing decode dominance across all configurations&lt;/li>
&lt;li>&lt;strong>Theoretical upper bound&lt;/strong> on energy savings from visual token pruning&lt;/li>
&lt;li>&lt;strong>Cross-model energy predictor&lt;/strong> — a linear model with five features (model size, input token count, output token count, and interaction terms) that explains &lt;strong>98.6% of energy variance&lt;/strong> without per-model calibration (MAPE = 10.3%)&lt;/li>
&lt;li>&lt;strong>Deployment guidelines&lt;/strong>: budget output not input; match token strategy to deployment scenario; anticipate content-driven energy variation&lt;/li>
&lt;/ul>
&lt;h2 id="conclusion">Conclusion&lt;/h2>
&lt;p>The true energy bottleneck in edge VLM inference is not &lt;em>seeing&lt;/em> but &lt;em>speaking&lt;/em>: not what the model sees, but how much it says. Our energy decomposition framework provides actionable guidelines for energy-aware VLM deployment on resource-constrained edge devices.&lt;/p>
&lt;p>[ACM MM 2026 Submission] — In Review&lt;/p></description></item><item><title>Seeing is Free, Speaking is Not: Uncovering the True Energy Bottleneck in Edge VLM Inference</title><link>https://junfei-z.github.io/zh/research/seeing-is-free-speaking-is-not/</link><pubDate>Fri, 27 Mar 2026 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/research/seeing-is-free-speaking-is-not/</guid><description>&lt;p>Vision-Language Models (VLMs) 是具身智能的感知核心，但其在边缘硬件上的能耗特征仍未被充分理解。现有的效率优化工作主要集中在减少 visual tokens，隐式地将视觉处理视为主要能耗来源。我们通过&lt;strong>首次系统性的设备端 VLM 推理能耗分析&lt;/strong>推翻了这一隐含假设，实验涵盖五个模型、三种架构系列、四种输入分辨率，以及两个硬件平台（NVIDIA RTX 3070 和 Jetson Orin NX）。&lt;/p>
&lt;h2 id="主要发现">主要发现&lt;/h2>
&lt;p>我们的分析得出三个核心发现：&lt;/p>
&lt;h3 id="1-功率是模型的固有指纹">1. 功率是模型的固有指纹&lt;/h3>
&lt;p>平均推理功率是&lt;strong>模型固有常量&lt;/strong>，不随输入分辨率、图像复杂度和提示类型变化，在所有条件下的变异不超过 5%。这意味着不同输入之间的所有能耗差异必然源于&lt;strong>推理时间&lt;/strong>的变化，而非功率消耗的变化。&lt;/p>
&lt;h3 id="2-decode-阶段主导能耗">2. Decode 阶段主导能耗&lt;/h3>
&lt;p>Autoregressive decoding 占据了&lt;strong>总能耗的 86% 至 97%&lt;/strong>。由于 prefill 和 decode 阶段之间的计算密集型与内存密集型不对称性，每个输出 token 的时钟时间是每个输入 token 的 &lt;strong>11 至 39 倍&lt;/strong>。输出 token 数量是延迟和能耗的主要驱动因素。&lt;/p>
&lt;h3 id="3-visual-token-剪枝的假象">3. Visual Token 剪枝的假象&lt;/h3>
&lt;p>即使移除&lt;strong>所有 visual tokens&lt;/strong>，对于固定 token 模型最多也只能节省&lt;strong>总能耗的 10%&lt;/strong>。相比之下，将输出长度减少 50% 可节省高达 &lt;strong>97%&lt;/strong> 的能耗。这些发现揭示了 visual token pruning 的根本局限性：它针对的是 prefill 阶段，而该阶段本身只占总能耗的少数部分。&lt;/p>
&lt;h2 id="贡献">贡献&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>能耗分解&lt;/strong>为 prefill 与 decode 阶段，展示了所有配置下 decode 的主导地位&lt;/li>
&lt;li>对 visual token pruning 节能效果的&lt;strong>理论上界&lt;/strong>&lt;/li>
&lt;li>&lt;strong>跨模型能耗预测器&lt;/strong> — 一个具有五个特征（模型大小、输入 token 数、输出 token 数及交互项）的线性模型，无需逐模型校准即可解释 &lt;strong>98.6% 的能耗方差&lt;/strong>（MAPE = 10.3%）&lt;/li>
&lt;li>&lt;strong>部署指南&lt;/strong>：预算应关注输出而非输入；根据部署场景匹配 token 策略；预估内容驱动的能耗变化&lt;/li>
&lt;/ul>
&lt;h2 id="结论">结论&lt;/h2>
&lt;p>边缘 VLM 推理的真正能耗瓶颈不在于&lt;em>看&lt;/em>，而在于&lt;em>说&lt;/em>：不是模型看到了什么，而是它说了多少。我们的能耗分解框架为资源受限的边缘设备上的节能型 VLM 部署提供了可操作的指导。&lt;/p>
&lt;p>[ACM MM 2026 投稿] — 审稿中&lt;/p></description></item><item><title>Slide - PhD Interview Talk: Research Interests in Cloud-Edge AI</title><link>https://junfei-z.github.io/samples/2_ic_interview/</link><pubDate>Tue, 20 Jan 2026 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/samples/2_ic_interview/</guid><description>&lt;p>PhD interview presentation for Imperial College Computing, covering research interests in cloud-edge collaborative AI inference.&lt;br>
Topics include privacy-aware inference routing, distributed LLM deployment on heterogeneous edge devices, and system-level optimization for resource-constrained environments.&lt;/p></description></item><item><title>演示文稿 - 博士面试：云边协同AI研究方向</title><link>https://junfei-z.github.io/zh/samples/2_ic_interview/</link><pubDate>Tue, 20 Jan 2026 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/samples/2_ic_interview/</guid><description>&lt;p>帝国理工 Computing 博士面试演示文稿，介绍云边协同AI推理方向的研究兴趣。&lt;br>
涵盖隐私感知的推理路由、异构边缘设备上的分布式大模型部署、以及资源受限环境下的系统级优化。&lt;/p></description></item><item><title>Stochastic Power Modeling and Constrained MDP Optimization for On-Device SLM Inference</title><link>https://junfei-z.github.io/research/power_modeling/</link><pubDate>Mon, 22 Sep 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/research/power_modeling/</guid><description>&lt;p>📄 [ICASSP 2026 Submission] — In Review&lt;/p>
&lt;p>This research introduces a &lt;strong>stochastic and interpretable framework&lt;/strong> for sustainable &lt;strong>on-device inference of small language models (SLMs)&lt;/strong> under strict energy and hardware constraints. By capturing fine-grained CPU/GPU power dynamics and optimizing inference scheduling with constrained MDPs, the work provides a principled foundation for &lt;strong>adaptive, resource-aware AI at the edge&lt;/strong>.&lt;/p>
&lt;h2 id="problem-and-motivation">Problem and Motivation&lt;/h2>
&lt;p>Running SLMs locally on smartphones, laptops, or IoT nodes promises &lt;strong>low-latency and privacy-preserving AI services&lt;/strong>, but these devices face &lt;strong>finite battery budgets&lt;/strong> and &lt;strong>strict power caps&lt;/strong>. Traditional energy models fail to capture the stochastic, phase-wise CPU/GPU behaviors of SLM inference, making them unsuitable for &lt;strong>multi-task adaptive deployment&lt;/strong>.&lt;/p>
&lt;h2 id="technical-contributions">Technical Contributions&lt;/h2>
&lt;h3 id="1-hsmm-based-energy-modeling">1. HSMM-Based Energy Modeling&lt;/h3>
&lt;ul>
&lt;li>Conducted fine-grained power measurements of &lt;strong>Gemma2-2B&lt;/strong> and &lt;strong>Qwen3-4B&lt;/strong> on MT-Bench.&lt;/li>
&lt;li>Modeled CPU and GPU traces separately with &lt;strong>Hidden Semi-Markov Models (HSMMs)&lt;/strong>:
&lt;ul>
&lt;li>GPU: ramp-up, plateau, decay phases.&lt;/li>
&lt;li>CPU: low-load and high-load bursts.&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>Achieved &lt;strong>higher fidelity than HMM and TCN baselines&lt;/strong> in predicting power fluctuations.&lt;/li>
&lt;/ul>
&lt;h3 id="2-constrained-mdp-formulation">2. Constrained MDP Formulation&lt;/h3>
&lt;ul>
&lt;li>Defined a &lt;strong>CMDP&lt;/strong> where each inference task selects an SLM configuration (model + quantization).&lt;/li>
&lt;li>State: remaining energy budget.&lt;/li>
&lt;li>Actions: candidate SLM setups.&lt;/li>
&lt;li>Reward: &lt;strong>LLM-as-a-Judge quality scores&lt;/strong>.&lt;/li>
&lt;li>Constraints: &lt;strong>finite energy budget&lt;/strong> and &lt;strong>instantaneous device-level power cap&lt;/strong>.&lt;/li>
&lt;/ul>
&lt;h3 id="3-policy-optimization-with-q-learning">3. Policy Optimization with Q-Learning&lt;/h3>
&lt;ul>
&lt;li>Constructed cost–reward pairs for six candidate actions.&lt;/li>
&lt;li>Solved CMDP with tabular Q-learning:
&lt;ul>
&lt;li>Improved average reward from &lt;strong>~9 to ~15&lt;/strong> over 300 episodes.&lt;/li>
&lt;li>Maintained energy usage within &lt;strong>85–90% of budget&lt;/strong>.&lt;/li>
&lt;li>Guaranteed no violation of power caps.&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;h2 id="results-and-insights">Results and Insights&lt;/h2>
&lt;ul>
&lt;li>HSMMs effectively capture &lt;strong>piecewise-stationary phases&lt;/strong> in edge inference.&lt;/li>
&lt;li>CMDP optimization reveals clear &lt;strong>energy–quality trade-offs&lt;/strong>.&lt;/li>
&lt;li>Learned policies significantly improve cumulative inference quality while &lt;strong>respecting real-world constraints&lt;/strong>.&lt;/li>
&lt;/ul>
&lt;h2 id="conclusion">Conclusion&lt;/h2>
&lt;p>This study establishes the first &lt;strong>unified mathematical framework&lt;/strong> linking SLM parameters, stochastic energy consumption, and inference quality. By integrating HSMM-based cost modeling with CMDP optimization, it enables &lt;strong>sustainable, adaptive deployment&lt;/strong> of SLMs in edge and IoT environments, paving the way for future extensions with deep RL and collaborative multi-device scheduling.&lt;/p></description></item><item><title>Stochastic Power Modeling and Constrained MDP Optimization for On-Device SLM Inference</title><link>https://junfei-z.github.io/zh/research/power_modeling/</link><pubDate>Mon, 22 Sep 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/research/power_modeling/</guid><description>&lt;p>[ICASSP 2026 投稿] — 审稿中&lt;/p>
&lt;p>本研究提出了一个&lt;strong>随机且可解释的框架&lt;/strong>，用于在严格的能耗和硬件约束下实现 &lt;strong>small language models (SLMs)&lt;/strong> 的可持续&lt;strong>设备端推理&lt;/strong>。通过捕获细粒度的 CPU/GPU 功耗动态，并利用约束 MDP 优化推理调度，本工作为&lt;strong>边缘端自适应、资源感知的 AI&lt;/strong> 提供了原则性基础。&lt;/p>
&lt;h2 id="问题与动机">问题与动机&lt;/h2>
&lt;p>在智能手机、笔记本电脑或 IoT 节点上本地运行 SLM 可提供&lt;strong>低延迟和隐私保护的 AI 服务&lt;/strong>，但这些设备面临&lt;strong>有限的电池预算&lt;/strong>和&lt;strong>严格的功率上限&lt;/strong>。传统能耗模型无法捕获 SLM 推理中随机的、分阶段的 CPU/GPU 行为，使其不适用于&lt;strong>多任务自适应部署&lt;/strong>。&lt;/p>
&lt;h2 id="技术贡献">技术贡献&lt;/h2>
&lt;h3 id="1-基于-hsmm-的能耗建模">1. 基于 HSMM 的能耗建模&lt;/h3>
&lt;ul>
&lt;li>对 &lt;strong>Gemma2-2B&lt;/strong> 和 &lt;strong>Qwen3-4B&lt;/strong> 在 MT-Bench 上进行了细粒度功耗测量。&lt;/li>
&lt;li>分别使用 &lt;strong>Hidden Semi-Markov Models (HSMMs)&lt;/strong> 对 CPU 和 GPU 功耗轨迹建模：
&lt;ul>
&lt;li>GPU：上升、平稳、衰减阶段。&lt;/li>
&lt;li>CPU：低负载和高负载突发。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>在预测功耗波动方面&lt;strong>优于 HMM 和 TCN 基线&lt;/strong>。&lt;/li>
&lt;/ul>
&lt;h3 id="2-约束-mdp-建模">2. 约束 MDP 建模&lt;/h3>
&lt;ul>
&lt;li>定义了一个 &lt;strong>CMDP&lt;/strong>，其中每个推理任务选择一种 SLM 配置（模型 + 量化方案）。&lt;/li>
&lt;li>状态：剩余能量预算。&lt;/li>
&lt;li>动作：候选 SLM 配置。&lt;/li>
&lt;li>奖励：&lt;strong>LLM-as-a-Judge 质量评分&lt;/strong>。&lt;/li>
&lt;li>约束：&lt;strong>有限能量预算&lt;/strong>和&lt;strong>瞬时设备级功率上限&lt;/strong>。&lt;/li>
&lt;/ul>
&lt;h3 id="3-基于-q-learning-的策略优化">3. 基于 Q-Learning 的策略优化&lt;/h3>
&lt;ul>
&lt;li>为六个候选动作构建了成本-奖励对。&lt;/li>
&lt;li>使用表格式 Q-learning 求解 CMDP：
&lt;ul>
&lt;li>在 300 个回合中将平均奖励从 &lt;strong>约 9 提升至约 15&lt;/strong>。&lt;/li>
&lt;li>将能耗维持在&lt;strong>预算的 85–90%&lt;/strong>。&lt;/li>
&lt;li>保证不违反功率上限。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;h2 id="结果与洞察">结果与洞察&lt;/h2>
&lt;ul>
&lt;li>HSMM 有效捕获了边缘推理中的&lt;strong>分段平稳阶段&lt;/strong>。&lt;/li>
&lt;li>CMDP 优化揭示了清晰的&lt;strong>能耗-质量权衡&lt;/strong>。&lt;/li>
&lt;li>学习到的策略在&lt;strong>遵守现实约束&lt;/strong>的同时显著提升了累计推理质量。&lt;/li>
&lt;/ul>
&lt;h2 id="结论">结论&lt;/h2>
&lt;p>本研究建立了首个&lt;strong>统一数学框架&lt;/strong>，将 SLM 参数、随机能耗和推理质量联系起来。通过将基于 HSMM 的成本建模与 CMDP 优化相结合，实现了 SLM 在边缘和 IoT 环境中的&lt;strong>可持续、自适应部署&lt;/strong>，为未来基于 deep RL 和多设备协同调度的扩展奠定了基础。&lt;/p></description></item><item><title>PRISM: Privacy-Aware Routing for Adaptive Cloud–Edge LLM Inference with Semantic Sketch Collaboration</title><link>https://junfei-z.github.io/research/prism/</link><pubDate>Wed, 30 Jul 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/research/prism/</guid><description>&lt;a href="https://junfei-z.github.io/prism_full.pdf" target="_blank">
&lt;img src="https://img.shields.io/badge/View%20Full%20Paper-PDF-red?logo=adobeacrobatreader&amp;logoColor=white" alt="PDF">
&lt;/a>
&lt;p>📄 [Accepted at 2026 AAAI Conference on Artificial Intelligence] — To appear&lt;/p>
&lt;p>This project introduces &lt;strong>PRISM&lt;/strong>, a context-aware cloud–edge inference framework that balances privacy, utility, and efficiency for &lt;strong>Large Language Model (LLM)&lt;/strong> services. It addresses the key limitations of uniform privacy mechanisms by adapting protection based on &lt;strong>semantic sensitivity&lt;/strong> of user inputs.&lt;/p>
&lt;h2 id="objectives">Objectives&lt;/h2>
&lt;p>The primary goal is to enable &lt;strong>privacy-preserving LLM inference&lt;/strong> in real-world deployments, where sensitive user prompts are routed intelligently between edge devices and the cloud. PRISM is designed to:&lt;/p>
&lt;ul>
&lt;li>Avoid unnecessary noise for benign inputs&lt;/li>
&lt;li>Preserve semantic coherence in sensitive prompts&lt;/li>
&lt;li>Reduce latency and energy consumption without compromising utility&lt;/li>
&lt;/ul>
&lt;h2 id="key-contributions">Key Contributions&lt;/h2>
&lt;h3 id="semantic-sensitive-execution-routing">Semantic-Sensitive Execution Routing&lt;/h3>
&lt;ul>
&lt;li>A &lt;strong>soft gating controller&lt;/strong> on the edge scores entity-level risk using contextual features (e.g., named entities, first-person references)&lt;/li>
&lt;li>Routes prompts to one of three execution paths:
&lt;ul>
&lt;li>&lt;strong>Edge-only&lt;/strong> for high-risk prompts&lt;/li>
&lt;li>&lt;strong>Cloud-only&lt;/strong> for low-risk prompts&lt;/li>
&lt;li>&lt;strong>Cloud–Edge Collaboration&lt;/strong> for mid-sensitivity prompts&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;h3 id="adaptive-two-layer-local-differential-privacy-ldp">Adaptive Two-Layer Local Differential Privacy (LDP)&lt;/h3>
&lt;ul>
&lt;li>Each sensitive entity is obfuscated through:
&lt;ul>
&lt;li>Category-level perturbation (e.g., masking &amp;ldquo;Diagnosis&amp;rdquo;)&lt;/li>
&lt;li>Value-level perturbation (e.g., replacing &amp;ldquo;HIV&amp;rdquo; with &amp;ldquo;Flu&amp;rdquo;)&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>Privacy budget allocation is guided by a sensitivity weight model ensuring &lt;strong>fine-grained protection without semantic collapse&lt;/strong>&lt;/li>
&lt;/ul>
&lt;h3 id="semantic-sketch-collaboration-protocol">Semantic Sketch Collaboration Protocol&lt;/h3>
&lt;ul>
&lt;li>Noisy prompts are processed in the cloud to generate &lt;strong>semantic sketches&lt;/strong> (e.g., high-level abstract responses)&lt;/li>
&lt;li>The edge-side &lt;strong>Small Language Model (SLM)&lt;/strong> refines these sketches using the original context&lt;/li>
&lt;li>Enables &lt;strong>high-utility responses under strong privacy constraints&lt;/strong>&lt;/li>
&lt;/ul>
&lt;h2 id="results--insights">Results &amp;amp; Insights&lt;/h2>
&lt;ul>
&lt;li>PRISM achieves &lt;strong>up to 3× lower latency&lt;/strong> and &lt;strong>2.5× lower energy consumption&lt;/strong> than baselines like Uniform and Selective LDP&lt;/li>
&lt;li>Delivers &lt;strong>higher LLM-Judge scores (up to 7.2)&lt;/strong> under strong privacy budgets&lt;/li>
&lt;li>Outperforms state-of-the-art methods (e.g., Split-and-Denoise, DP-Forward) in terms of both utility and efficiency&lt;/li>
&lt;li>Robust across &lt;strong>8 different model combinations&lt;/strong> (e.g., GPT-4o + StableLM)&lt;/li>
&lt;/ul>
&lt;table>
&lt;thead>
&lt;tr>
&lt;th>Method&lt;/th>
&lt;th>Ct.(s)&lt;/th>
&lt;th>Ec.(J)&lt;/th>
&lt;th>IQ.&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>PRISM&lt;/td>
&lt;td>7.92&lt;/td>
&lt;td>687.2&lt;/td>
&lt;td>6.88&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Uniform LDP&lt;/td>
&lt;td>20.56&lt;/td>
&lt;td>1707.6&lt;/td>
&lt;td>5.72&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Selective LDP&lt;/td>
&lt;td>21.22&lt;/td>
&lt;td>1770.8&lt;/td>
&lt;td>5.94&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Edge-Only&lt;/td>
&lt;td>17.84&lt;/td>
&lt;td>1573.9&lt;/td>
&lt;td>5.09&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Cloud-Only&lt;/td>
&lt;td>&lt;strong>5.13&lt;/strong>&lt;/td>
&lt;td>&lt;strong>296.3&lt;/strong>&lt;/td>
&lt;td>&lt;strong>8.14&lt;/strong>&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
&lt;h2 id="broader-impact">Broader Impact&lt;/h2>
&lt;p>PRISM enables &lt;strong>selective privacy-preserving inference&lt;/strong> for sensitive domains such as &lt;strong>medical, financial, and personal assistants&lt;/strong>, paving the way for:&lt;/p>
&lt;ul>
&lt;li>Deploying LLMs responsibly in &lt;strong>privacy-critical environments&lt;/strong>&lt;/li>
&lt;li>Reducing energy costs in &lt;strong>cloud-edge infrastructure&lt;/strong>&lt;/li>
&lt;li>Bridging the tradeoff between &lt;strong>privacy and inference quality&lt;/strong>&lt;/li>
&lt;/ul></description></item><item><title>PRISM: Privacy-Aware Routing for Adaptive Cloud–Edge LLM Inference with Semantic Sketch Collaboration</title><link>https://junfei-z.github.io/zh/research/prism/</link><pubDate>Wed, 30 Jul 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/research/prism/</guid><description>&lt;a href="https://junfei-z.github.io/prism_full.pdf" target="_blank">
&lt;img src="https://img.shields.io/badge/View%20Full%20Paper-PDF-red?logo=adobeacrobatreader&amp;logoColor=white" alt="PDF">
&lt;/a>
&lt;p>[已被 2026 AAAI Conference on Artificial Intelligence 录用] — 即将发表&lt;/p>
&lt;p>本项目提出了 &lt;strong>PRISM&lt;/strong>，一个上下文感知的云-边推理框架，为 &lt;strong>Large Language Model (LLM)&lt;/strong> 服务在隐私、效用和效率之间取得平衡。它通过根据用户输入的&lt;strong>语义敏感度&lt;/strong>自适应调整保护策略，解决了统一隐私机制的关键局限。&lt;/p>
&lt;h2 id="目标">目标&lt;/h2>
&lt;p>主要目标是在实际部署中实现&lt;strong>隐私保护的 LLM 推理&lt;/strong>，将敏感的用户提示智能地路由到边缘设备和云端之间。PRISM 旨在：&lt;/p>
&lt;ul>
&lt;li>避免对无害输入添加不必要的噪声&lt;/li>
&lt;li>保持敏感提示的语义连贯性&lt;/li>
&lt;li>在不损害效用的前提下降低延迟和能耗&lt;/li>
&lt;/ul>
&lt;h2 id="主要贡献">主要贡献&lt;/h2>
&lt;h3 id="语义敏感的执行路由">语义敏感的执行路由&lt;/h3>
&lt;ul>
&lt;li>边缘端的&lt;strong>软门控控制器&lt;/strong>利用上下文特征（例如命名实体、第一人称引用）评估实体级风险&lt;/li>
&lt;li>将提示路由到三条执行路径之一：
&lt;ul>
&lt;li>&lt;strong>仅边缘&lt;/strong>：用于高风险提示&lt;/li>
&lt;li>&lt;strong>仅云端&lt;/strong>：用于低风险提示&lt;/li>
&lt;li>&lt;strong>云-边协作&lt;/strong>：用于中等敏感度提示&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;h3 id="自适应两层-local-differential-privacy-ldp">自适应两层 Local Differential Privacy (LDP)&lt;/h3>
&lt;ul>
&lt;li>每个敏感实体通过以下方式进行混淆：
&lt;ul>
&lt;li>类别级扰动（例如掩蔽&amp;quot;诊断&amp;quot;）&lt;/li>
&lt;li>值级扰动（例如将&amp;quot;HIV&amp;quot;替换为&amp;quot;Flu&amp;quot;）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>隐私预算分配由敏感度权重模型引导，确保&lt;strong>细粒度保护且不造成语义崩塌&lt;/strong>&lt;/li>
&lt;/ul>
&lt;h3 id="语义草图协作协议">语义草图协作协议&lt;/h3>
&lt;ul>
&lt;li>带噪声的提示在云端处理，生成&lt;strong>语义草图&lt;/strong>（例如高层次的抽象回复）&lt;/li>
&lt;li>边缘端的 &lt;strong>Small Language Model (SLM)&lt;/strong> 利用原始上下文精化这些草图&lt;/li>
&lt;li>在&lt;strong>强隐私约束下实现高效用回复&lt;/strong>&lt;/li>
&lt;/ul>
&lt;h2 id="结果与洞察">结果与洞察&lt;/h2>
&lt;ul>
&lt;li>PRISM 相比 Uniform 和 Selective LDP 等基线方法，实现了&lt;strong>最高 3 倍的延迟降低&lt;/strong>和 &lt;strong>2.5 倍的能耗降低&lt;/strong>&lt;/li>
&lt;li>在强隐私预算下提供&lt;strong>更高的 LLM-Judge 评分（最高 7.2）&lt;/strong>&lt;/li>
&lt;li>在效用和效率方面均优于现有最先进方法（例如 Split-and-Denoise、DP-Forward）&lt;/li>
&lt;li>在 &lt;strong>8 种不同模型组合&lt;/strong>（例如 GPT-4o + StableLM）上表现稳健&lt;/li>
&lt;/ul>
&lt;table>
&lt;thead>
&lt;tr>
&lt;th>Method&lt;/th>
&lt;th>Ct.(s)&lt;/th>
&lt;th>Ec.(J)&lt;/th>
&lt;th>IQ.&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>PRISM&lt;/td>
&lt;td>7.92&lt;/td>
&lt;td>687.2&lt;/td>
&lt;td>6.88&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Uniform LDP&lt;/td>
&lt;td>20.56&lt;/td>
&lt;td>1707.6&lt;/td>
&lt;td>5.72&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Selective LDP&lt;/td>
&lt;td>21.22&lt;/td>
&lt;td>1770.8&lt;/td>
&lt;td>5.94&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Edge-Only&lt;/td>
&lt;td>17.84&lt;/td>
&lt;td>1573.9&lt;/td>
&lt;td>5.09&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>Cloud-Only&lt;/td>
&lt;td>&lt;strong>5.13&lt;/strong>&lt;/td>
&lt;td>&lt;strong>296.3&lt;/strong>&lt;/td>
&lt;td>&lt;strong>8.14&lt;/strong>&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
&lt;h2 id="更广泛的影响">更广泛的影响&lt;/h2>
&lt;p>PRISM 为&lt;strong>医疗、金融和个人助理&lt;/strong>等敏感领域提供了&lt;strong>选择性隐私保护推理&lt;/strong>，为以下方向铺平了道路：&lt;/p>
&lt;ul>
&lt;li>在&lt;strong>隐私关键环境&lt;/strong>中负责任地部署 LLM&lt;/li>
&lt;li>降低&lt;strong>云-边基础设施&lt;/strong>的能耗成本&lt;/li>
&lt;li>弥合&lt;strong>隐私与推理质量&lt;/strong>之间的权衡&lt;/li>
&lt;/ul></description></item><item><title>Slide - Can Large Language Models Credibly Stand in for Humans in Game-Theoretic Experiments?</title><link>https://junfei-z.github.io/samples/1_dsp/</link><pubDate>Wed, 21 May 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/samples/1_dsp/</guid><description>&lt;p>Evaluating LLMs (e.g., GPT-4o, LLaMA-3.3) in classic games such as Prisoner&amp;rsquo;s Dilemma, Ultimatum Game, and Public Goods Game.&lt;br>
We propose a multi-agent routing framework PRIME-Router that improves strategic adaptability and persona consistency across repeated interactions.&lt;/p></description></item><item><title>演示文稿 - Can Large Language Models Credibly Stand in for Humans in Game-Theoretic Experiments?</title><link>https://junfei-z.github.io/zh/samples/1_dsp/</link><pubDate>Wed, 21 May 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/samples/1_dsp/</guid><description>&lt;p>评估 LLMs（如 GPT-4o、LLaMA-3.3）在经典博弈中的表现，包括 Prisoner&amp;rsquo;s Dilemma、Ultimatum Game 和 Public Goods Game。
我们提出了一种多智能体路由框架 PRIME-Router，可在重复交互中提升策略适应性和角色一致性。&lt;/p></description></item><item><title>Report - MPPI with Control Barrier Functions for F1/10: Robust Safety Under Real-World Uncertainty</title><link>https://junfei-z.github.io/samples/3_rff/</link><pubDate>Sat, 17 May 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/samples/3_rff/</guid><description>&lt;p>Shield-MPPI combines sampling-based planning and safety enforcement through Control Barrier Functions (CBFs), enabling real-time, robust trajectory generation for autonomous racing on the F1TENTH platform. The system integrates EKF-based tracking, spline evasion planning, and a modular ROS2 architecture to ensure safety under dynamic racing conditions.&lt;/p></description></item><item><title>报告 - MPPI with Control Barrier Functions for F1/10: Robust Safety Under Real-World Uncertainty</title><link>https://junfei-z.github.io/zh/samples/3_rff/</link><pubDate>Sat, 17 May 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/samples/3_rff/</guid><description>&lt;p>Shield-MPPI 将基于采样的规划与通过 Control Barrier Functions (CBFs) 实现的安全保障相结合，在 F1TENTH 平台上实现了实时、鲁棒的自主赛车轨迹生成。该系统集成了基于 EKF 的跟踪、Spline 规避规划和模块化 ROS2 架构，以确保动态赛车条件下的安全性。&lt;/p></description></item><item><title>MPPI with Control Barrier Functions for F1/10: Robust Safety Under Real-World Uncertainty</title><link>https://junfei-z.github.io/project/1_t5/</link><pubDate>Wed, 07 May 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/project/1_t5/</guid><description>&lt;p>This project implements Shield-MPPI, a novel integration of Control Barrier Functions (CBFs) with Model Predictive Path Integral (MPPI) control, on the F1/10 autonomous racing platform to achieve robust, safe navigation under real-world uncertainty.&lt;/p>
&lt;p>Key contributions include:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Safety Assurance&lt;/strong>: Enforced via discrete-time CBFs ensuring forward invariance of a predefined safe set.&lt;/li>
&lt;li>&lt;strong>Cost Augmentation and Control Filtering&lt;/strong>: Augmented MPPI trajectory costs with CBF penalties and applied gradient-based filtering to guarantee real-time safety.&lt;/li>
&lt;li>&lt;strong>Robustness Evaluation&lt;/strong>: Assessed system under disturbances, noise, and model mismatch in simulated and physical racing environments.&lt;/li>
&lt;li>&lt;strong>Computational Feasibility&lt;/strong>: Validated Shield-MPPI’s real-time performance on resource-limited platforms.&lt;/li>
&lt;/ul>
&lt;p>The approach demonstrates significant improvement over baseline MPPI in terms of collision avoidance, track adherence, and robustness.&lt;/p></description></item><item><title>MPPI with Control Barrier Functions for F1/10：真实世界不确定性下的鲁棒安全控制</title><link>https://junfei-z.github.io/zh/project/1_t5/</link><pubDate>Wed, 07 May 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/project/1_t5/</guid><description>&lt;p>本项目在 F1/10 自主赛车平台上实现了 Shield-MPPI，这是一种将 Control Barrier Functions (CBFs) 与 Model Predictive Path Integral (MPPI) 控制相结合的新方法，旨在实现真实世界不确定性条件下的鲁棒安全导航。&lt;/p>
&lt;p>主要贡献包括：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>安全保障&lt;/strong>：通过离散时间 CBFs 确保预定义安全集的前向不变性。&lt;/li>
&lt;li>&lt;strong>代价增强与控制滤波&lt;/strong>：在 MPPI 轨迹代价中加入 CBF 惩罚项，并应用基于梯度的滤波方法以保证实时安全性。&lt;/li>
&lt;li>&lt;strong>鲁棒性评估&lt;/strong>：在仿真和实际赛车环境中评估了系统在扰动、噪声和模型失配下的表现。&lt;/li>
&lt;li>&lt;strong>计算可行性&lt;/strong>：验证了 Shield-MPPI 在资源受限平台上的实时性能。&lt;/li>
&lt;/ul>
&lt;p>该方法在碰撞避免、赛道跟踪和鲁棒性方面较基准 MPPI 有显著提升。&lt;/p></description></item><item><title>RL-Enhanced Disturbance-Aware MPC for Robust UAV Trajectory Tracking</title><link>https://junfei-z.github.io/research/rl-enhanced-disturbance-aware-mpc-for-robust-uav-trajectory-tracking/</link><pubDate>Wed, 07 May 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/research/rl-enhanced-disturbance-aware-mpc-for-robust-uav-trajectory-tracking/</guid><description>&lt;a href="https://junfei-z.github.io/uav_control.pdf" target="_blank">
&lt;img src="https://img.shields.io/badge/View%20Full%20Paper-PDF-red?logo=adobeacrobatreader&amp;logoColor=white" alt="PDF">
&lt;/a>
&lt;p>📄[Accepted at IEEE SMC 2025] — To appear&lt;/p>
&lt;p>This research introduces &lt;strong>ROAM&lt;/strong>, a novel RL-enhanced, disturbance-aware MPC framework for &lt;strong>precise UAV trajectory tracking&lt;/strong> in uncertain and dynamic environments. The method combines the predictive strengths of MPC with the fast response of reinforcement learning (RL) and the robustness of an adaptive sliding mode observer (SMO).&lt;/p>
&lt;h2 id="problem-and-motivation">Problem and Motivation&lt;/h2>
&lt;p>Traditional UAV controllers using MPC struggle under &lt;strong>model mismatch&lt;/strong>, &lt;strong>wind disturbances&lt;/strong>, and &lt;strong>computational delays&lt;/strong>, resulting in residual tracking errors and slow convergence. This work addresses those challenges via two innovations:&lt;/p>
&lt;ul>
&lt;li>An &lt;strong>offline-trained RL warm-start policy&lt;/strong> to accelerate MPC convergence&lt;/li>
&lt;li>An &lt;strong>Adaptive Super-Twisting Sliding Mode Observer (AST-SMO)&lt;/strong> to estimate and reject real-time disturbances&lt;/li>
&lt;/ul>
&lt;h2 id="technical-contributions">Technical Contributions&lt;/h2>
&lt;h3 id="1-rl-based-warm-start">1. RL-Based Warm Start&lt;/h3>
&lt;ul>
&lt;li>A &lt;strong>direction-conditioned policy&lt;/strong> is trained via imitation learning on expert MPC trajectories.&lt;/li>
&lt;li>During real-time control, it provides &lt;strong>trajectory-consistent initial guesses&lt;/strong> to the MPC solver, reducing early-stage tracking error by &lt;strong>16.9%&lt;/strong> and computation time by &lt;strong>38.7%&lt;/strong>.&lt;/li>
&lt;/ul>
&lt;h3 id="2-ast-smo-for-disturbance-estimation">2. AST-SMO for Disturbance Estimation&lt;/h3>
&lt;ul>
&lt;li>The SMO estimates external disturbances in real time using a smooth hyperbolic function to avoid chattering.&lt;/li>
&lt;li>An adaptive gain tuning mechanism adjusts sensitivity dynamically for better convergence.&lt;/li>
&lt;/ul>
&lt;h3 id="3-disturbance-aware-mpc">3. Disturbance-Aware MPC&lt;/h3>
&lt;ul>
&lt;li>MPC is reformulated to incorporate real-time estimates from AST-SMO:
\[
x_{k+1} = Ax_k + Bu_k + E(\hat{d}_k)
\]&lt;/li>
&lt;li>Objective: minimize both tracking error and control effort, while maintaining system constraints.&lt;/li>
&lt;/ul>
&lt;h2 id="simulation-results">Simulation Results&lt;/h2>
&lt;ul>
&lt;li>Evaluated on a 12-DOF quadrotor model under sinusoidal and noisy disturbances.&lt;/li>
&lt;li>ROAM achieved:
&lt;ul>
&lt;li>16.9% improvement in early-stage tracking accuracy&lt;/li>
&lt;li>38.7% reduction in computation time&lt;/li>
&lt;li>Superior trajectory adherence under heavy external disturbances compared to classical MPC&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;h2 id="conclusion">Conclusion&lt;/h2>
&lt;p>ROAM demonstrates that &lt;strong>deep integration of RL, observers, and MPC&lt;/strong> yields a control system with faster convergence, better stability, and higher resilience. Its lightweight and modular design makes it highly suitable for &lt;strong>real-time deployment&lt;/strong> on embedded UAV platforms.&lt;/p>
&lt;!-- [Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.
**Embed videos, podcasts, code, LaTeX math, and even test students!**
On this page, you'll find some examples of the types of technical content that can be rendered with Hugo Blox.
## Video
Teach your course by sharing videos with your students. Choose from one of the following approaches:
**Youtube**:
{{&lt; youtube w7Ft2ymGmfc >}}
**Bilibili**:
{{&lt; bilibili id="BV1WV4y1r7DF" >}}
**Video file**
Videos may be added to a page by either placing them in your `assets/media/` media library or in your [page's folder](https://gohugo.io/content-management/page-bundles/), and then embedding them with the _video_ shortcode:
{{&lt; video src="my_video.mp4" controls="yes" >}}
## Podcast
You can add a podcast or music to a page by placing the MP3 file in the page's folder or the media library folder and then embedding the audio on your page with the _audio_ shortcode:
{{&lt; audio src="ambient-piano.mp3" >}}
Try it out:
&lt;audio controls >
&lt;source src="https://junfei-z.github.io/research/rl-enhanced-disturbance-aware-mpc-for-robust-uav-trajectory-tracking/ambient-piano.mp3" type="audio/mpeg">
&lt;/audio>
## Test students
Provide a simple yet fun self-assessment by revealing the solutions to challenges with the `spoiler` shortcode:
```markdown
{{&lt; spoiler text="👉 Click to view the solution" >}}
You found me!
{{&lt; /spoiler >}}
```
renders as
&lt;details class="spoiler " id="spoiler-2">
&lt;summary class="cursor-pointer">👉 Click to view the solution&lt;/summary>
&lt;div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2">
You found me 🎉
&lt;/div>
&lt;/details>
## Math
Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.yaml` file.
To render _inline_ or _block_ math, wrap your LaTeX math with `{{&lt; math >}}$...${{&lt; /math >}}` or `{{&lt; math >}}$$...$${{&lt; /math >}}`, respectively.
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">We wrap the LaTeX math in the Hugo Blox &lt;em>math&lt;/em> shortcode to prevent Hugo rendering our math as Markdown.&lt;/span>
&lt;/div>
Example **math block**:
```latex
{{&lt; math >}}
$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$
{{&lt; /math >}}
```
renders as
$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$
Example **inline math** `{{&lt; math >}}$\nabla F(\mathbf{x}_{n})${{&lt; /math >}}` renders as $\nabla F(\mathbf{x}_{n})$
.
Example **multi-line math** using the math linebreak (`\\`):
```latex
{{&lt; math >}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}$$
{{&lt; /math >}}
```
renders as
$$
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}
$$
## Code
Hugo Blox Builder utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the `config/_default/params.yaml` file.
```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```
renders as
```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```
## Inline Images
```go
{{&lt; icon name="python" >}} Python
```
renders as
&lt;span class="inline-block pr-1">
&lt;svg style="height: 1em; transform: translateY(0.1em);" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentColor">&lt;path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/>&lt;/svg>
&lt;/span> Python
## Did you find this page helpful? Consider sharing it 🙌 --></description></item><item><title>RL-Enhanced Disturbance-Aware MPC for Robust UAV Trajectory Tracking</title><link>https://junfei-z.github.io/zh/research/rl-enhanced-disturbance-aware-mpc-for-robust-uav-trajectory-tracking/</link><pubDate>Wed, 07 May 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/research/rl-enhanced-disturbance-aware-mpc-for-robust-uav-trajectory-tracking/</guid><description>&lt;a href="https://junfei-z.github.io/uav_control.pdf" target="_blank">
&lt;img src="https://img.shields.io/badge/View%20Full%20Paper-PDF-red?logo=adobeacrobatreader&amp;logoColor=white" alt="PDF">
&lt;/a>
&lt;p>[已被 IEEE SMC 2025 录用] — 即将发表&lt;/p>
&lt;p>本研究提出了 &lt;strong>ROAM&lt;/strong>，一种新颖的 RL 增强、扰动感知的 MPC 框架，用于不确定和动态环境中的&lt;strong>精确 UAV 轨迹跟踪&lt;/strong>。该方法结合了 MPC 的预测优势、reinforcement learning (RL) 的快速响应能力以及自适应 sliding mode observer (SMO) 的鲁棒性。&lt;/p>
&lt;h2 id="问题与动机">问题与动机&lt;/h2>
&lt;p>使用 MPC 的传统 UAV 控制器在&lt;strong>模型失配&lt;/strong>、&lt;strong>风扰动&lt;/strong>和&lt;strong>计算延迟&lt;/strong>下表现不佳，导致残余跟踪误差和收敛缓慢。本工作通过两项创新解决这些挑战：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>离线训练的 RL 热启动策略&lt;/strong>以加速 MPC 收敛&lt;/li>
&lt;li>&lt;strong>Adaptive Super-Twisting Sliding Mode Observer (AST-SMO)&lt;/strong> 以估计和抑制实时扰动&lt;/li>
&lt;/ul>
&lt;h2 id="技术贡献">技术贡献&lt;/h2>
&lt;h3 id="1-基于-rl-的热启动">1. 基于 RL 的热启动&lt;/h3>
&lt;ul>
&lt;li>通过在专家 MPC 轨迹上进行模仿学习，训练了一个&lt;strong>方向条件策略&lt;/strong>。&lt;/li>
&lt;li>在实时控制中，它为 MPC 求解器提供&lt;strong>与轨迹一致的初始猜测&lt;/strong>，将早期跟踪误差降低了 &lt;strong>16.9%&lt;/strong>，计算时间减少了 &lt;strong>38.7%&lt;/strong>。&lt;/li>
&lt;/ul>
&lt;h3 id="2-用于扰动估计的-ast-smo">2. 用于扰动估计的 AST-SMO&lt;/h3>
&lt;ul>
&lt;li>SMO 使用平滑双曲函数实时估计外部扰动，以避免抖振。&lt;/li>
&lt;li>自适应增益调节机制动态调整灵敏度以实现更好的收敛。&lt;/li>
&lt;/ul>
&lt;h3 id="3-扰动感知-mpc">3. 扰动感知 MPC&lt;/h3>
&lt;ul>
&lt;li>MPC 被重新构建以纳入来自 AST-SMO 的实时估计：
\[
x_{k+1} = Ax_k + Bu_k + E(\hat{d}_k)
\]&lt;/li>
&lt;li>目标：最小化跟踪误差和控制能耗，同时维持系统约束。&lt;/li>
&lt;/ul>
&lt;h2 id="仿真结果">仿真结果&lt;/h2>
&lt;ul>
&lt;li>在正弦和噪声扰动下的 12 自由度四旋翼模型上进行了评估。&lt;/li>
&lt;li>ROAM 实现了：
&lt;ul>
&lt;li>早期跟踪精度提升 16.9%&lt;/li>
&lt;li>计算时间减少 38.7%&lt;/li>
&lt;li>在强外部扰动下相比经典 MPC 具有更优的轨迹跟随性能&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;h2 id="结论">结论&lt;/h2>
&lt;p>ROAM 表明，&lt;strong>RL、观测器与 MPC 的深度集成&lt;/strong>可产生具有更快收敛速度、更好稳定性和更高韧性的控制系统。其轻量化和模块化设计使其非常适合在嵌入式 UAV 平台上进行&lt;strong>实时部署&lt;/strong>。&lt;/p>
&lt;!-- [Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.
**Embed videos, podcasts, code, LaTeX math, and even test students!**
On this page, you'll find some examples of the types of technical content that can be rendered with Hugo Blox.
## Video
Teach your course by sharing videos with your students. Choose from one of the following approaches:
**Youtube**:
{{&lt; youtube w7Ft2ymGmfc >}}
**Bilibili**:
{{&lt; bilibili id="BV1WV4y1r7DF" >}}
**Video file**
Videos may be added to a page by either placing them in your `assets/media/` media library or in your [page's folder](https://gohugo.io/content-management/page-bundles/), and then embedding them with the _video_ shortcode:
{{&lt; video src="my_video.mp4" controls="yes" >}}
## Podcast
You can add a podcast or music to a page by placing the MP3 file in the page's folder or the media library folder and then embedding the audio on your page with the _audio_ shortcode:
{{&lt; audio src="ambient-piano.mp3" >}}
Try it out:
&lt;audio controls >
&lt;source src="https://junfei-z.github.io/zh/research/rl-enhanced-disturbance-aware-mpc-for-robust-uav-trajectory-tracking/ambient-piano.mp3" type="audio/mpeg">
&lt;/audio>
## Test students
Provide a simple yet fun self-assessment by revealing the solutions to challenges with the `spoiler` shortcode:
```markdown
{{&lt; spoiler text="👉 Click to view the solution" >}}
You found me!
{{&lt; /spoiler >}}
```
renders as
&lt;details class="spoiler " id="spoiler-2">
&lt;summary class="cursor-pointer">👉 Click to view the solution&lt;/summary>
&lt;div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2">
You found me 🎉
&lt;/div>
&lt;/details>
## Math
Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.yaml` file.
To render _inline_ or _block_ math, wrap your LaTeX math with `{{&lt; math >}}$...${{&lt; /math >}}` or `{{&lt; math >}}$$...$${{&lt; /math >}}`, respectively.
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">We wrap the LaTeX math in the Hugo Blox &lt;em>math&lt;/em> shortcode to prevent Hugo rendering our math as Markdown.&lt;/span>
&lt;/div>
Example **math block**:
```latex
{{&lt; math >}}
$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$
{{&lt; /math >}}
```
renders as
$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$
Example **inline math** `{{&lt; math >}}$\nabla F(\mathbf{x}_{n})${{&lt; /math >}}` renders as $\nabla F(\mathbf{x}_{n})$
.
Example **multi-line math** using the math linebreak (`\\`):
```latex
{{&lt; math >}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}$$
{{&lt; /math >}}
```
renders as
$$
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}
$$
## Code
Hugo Blox Builder utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the `config/_default/params.yaml` file.
```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```
renders as
```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```
## Inline Images
```go
{{&lt; icon name="python" >}} Python
```
renders as
&lt;span class="inline-block pr-1">
&lt;svg style="height: 1em; transform: translateY(0.1em);" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentColor">&lt;path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/>&lt;/svg>
&lt;/span> Python
## Did you find this page helpful? Consider sharing it 🙌 --></description></item><item><title>Can Large Language Models Credibly Stand in for Humans in Game-Theoretic Experiments?</title><link>https://junfei-z.github.io/research/can-large-language-models-credibly-stand-in-for-humans-in-game-theoretic-experiments/</link><pubDate>Thu, 17 Apr 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/research/can-large-language-models-credibly-stand-in-for-humans-in-game-theoretic-experiments/</guid><description>&lt;p>This work investigates the feasibility of using Large Language Models (LLMs) as &lt;strong>proxies for human participants&lt;/strong> in behavioral game-theoretic experiments. We evaluated four LLMs—GPT-4o, Llama‑3.3‑70B‑Instruct, Llama‑3.3‑8B‑Instruct, and DeepSeek-R1 across &lt;strong>three canonical games&lt;/strong>: the &lt;strong>Prisoner’s Dilemma&lt;/strong>, the &lt;strong>Ultimatum Game&lt;/strong>, and the &lt;strong>Public Goods Game&lt;/strong>.&lt;/p>
&lt;h2 id="research-objectives">Research Objectives&lt;/h2>
&lt;ul>
&lt;li>Evaluate &lt;strong>behavioral alignment&lt;/strong>, &lt;strong>persona consistency&lt;/strong>, and &lt;strong>strategic adaptability&lt;/strong> of LLMs vs. human norms.&lt;/li>
&lt;li>Design a &lt;strong>modular, multi-agent framework (PRIME-Router)&lt;/strong> for improved consistency and adaptability.&lt;/li>
&lt;li>Benchmark LLM behavior using &lt;strong>MBTI-based persona prompts&lt;/strong>: Diplomat, Analyst, Sentinel, Explorer.&lt;/li>
&lt;/ul>
&lt;h2 id="core-contributions">Core Contributions&lt;/h2>
&lt;h3 id="1-behavioral-assessment-in-canonical-games">1. Behavioral Assessment in Canonical Games&lt;/h3>
&lt;p>LLMs were benchmarked against human behavior using three new metrics:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>BAM (Behavioral Alignment Measure)&lt;/strong>: similarity to human action distributions&lt;/li>
&lt;li>&lt;strong>PCI (Persona Consistency Index)&lt;/strong>: adherence to prompted social roles&lt;/li>
&lt;li>&lt;strong>ASP (Adaptive Strategic Profile)&lt;/strong>: responsiveness to evolving game contexts&lt;/li>
&lt;/ul>
&lt;p>Key findings:&lt;/p>
&lt;ul>
&lt;li>Most LLMs showed &lt;strong>high initial BAM&lt;/strong> but struggled with &lt;strong>adaptive consistency&lt;/strong> in repeated games.&lt;/li>
&lt;li>GPT-4o and LLaMA-3.3-70B demonstrated &lt;strong>excellent persona consistency&lt;/strong> in one-shot games.&lt;/li>
&lt;/ul>
&lt;h3 id="2-prime-router-framework">2. PRIME-Router Framework&lt;/h3>
&lt;p>To overcome adaptation and consistency limitations, we proposed &lt;strong>PRIME-Router&lt;/strong>, a modular MoE-style architecture that:&lt;/p>
&lt;ul>
&lt;li>Spawns &lt;strong>specialized subroles&lt;/strong> (e.g., Empathy Enforcer, Strategic Planner)&lt;/li>
&lt;li>Assigns the &lt;strong>most suitable LLM&lt;/strong> to each subrole based on empirical performance&lt;/li>
&lt;li>Aggregates multi-agent outputs via &lt;strong>collaboration patterns&lt;/strong> (e.g., star, debate, chain)&lt;/li>
&lt;/ul>
&lt;p>PRIME-Router improves:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>PCI&lt;/strong> by up to &lt;strong>0.23&lt;/strong>&lt;/li>
&lt;li>&lt;strong>ASP&lt;/strong> by up to &lt;strong>0.32&lt;/strong>
across repeated games.&lt;/li>
&lt;/ul>
&lt;h3 id="3-implications-and-outlook">3. Implications and Outlook&lt;/h3>
&lt;ul>
&lt;li>LLMs can &lt;strong>simulate human-like behavior credibly&lt;/strong>, but &lt;strong>strategic depth&lt;/strong> and &lt;strong>long-horizon persona fidelity&lt;/strong> remain challenges.&lt;/li>
&lt;li>PRIME-Router paves the way for &lt;strong>cost-effective AI agents&lt;/strong> in &lt;strong>social science experimentation&lt;/strong>, &lt;strong>policy modeling&lt;/strong>, and &lt;strong>online platform simulation&lt;/strong>.&lt;/li>
&lt;/ul>
&lt;h2 id="conclusion">Conclusion&lt;/h2>
&lt;p>Our study highlights the promise and limitations of LLMs in behavioral game simulations. Structured multi-agent design like PRIME-Router significantly enhances realism, offering a new paradigm for &lt;strong>AI-driven human modeling&lt;/strong> in experimental social science.&lt;/p>
&lt;p>📄 [AAAI 2026 Submission] — In Review&lt;/p></description></item><item><title>Can Large Language Models Credibly Stand in for Humans in Game-Theoretic Experiments?</title><link>https://junfei-z.github.io/zh/research/can-large-language-models-credibly-stand-in-for-humans-in-game-theoretic-experiments/</link><pubDate>Thu, 17 Apr 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/research/can-large-language-models-credibly-stand-in-for-humans-in-game-theoretic-experiments/</guid><description>&lt;p>本研究探讨了使用 Large Language Models (LLMs) 作为行为博弈论实验中&lt;strong>人类参与者代理&lt;/strong>的可行性。我们评估了四个 LLM——GPT-4o、Llama-3.3-70B-Instruct、Llama-3.3-8B-Instruct 和 DeepSeek-R1，涵盖&lt;strong>三个经典博弈&lt;/strong>：&lt;strong>Prisoner’s Dilemma&lt;/strong>、&lt;strong>Ultimatum Game&lt;/strong> 和 &lt;strong>Public Goods Game&lt;/strong>。&lt;/p>
&lt;h2 id="研究目标">研究目标&lt;/h2>
&lt;ul>
&lt;li>评估 LLM 相对于人类规范的&lt;strong>行为一致性&lt;/strong>、&lt;strong>角色一致性&lt;/strong>和&lt;strong>策略适应性&lt;/strong>。&lt;/li>
&lt;li>设计一个**模块化多智能体框架（PRIME-Router）**以提高一致性和适应性。&lt;/li>
&lt;li>使用&lt;strong>基于 MBTI 的角色提示&lt;/strong>对 LLM 行为进行基准测试：Diplomat、Analyst、Sentinel、Explorer。&lt;/li>
&lt;/ul>
&lt;h2 id="核心贡献">核心贡献&lt;/h2>
&lt;h3 id="1-经典博弈中的行为评估">1. 经典博弈中的行为评估&lt;/h3>
&lt;p>使用三个新指标对 LLM 进行了与人类行为的对标：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>BAM (Behavioral Alignment Measure)&lt;/strong>：与人类行为分布的相似度&lt;/li>
&lt;li>&lt;strong>PCI (Persona Consistency Index)&lt;/strong>：对提示的社会角色的遵循程度&lt;/li>
&lt;li>&lt;strong>ASP (Adaptive Strategic Profile)&lt;/strong>：对不断变化的博弈情境的响应能力&lt;/li>
&lt;/ul>
&lt;p>主要发现：&lt;/p>
&lt;ul>
&lt;li>大多数 LLM 表现出&lt;strong>较高的初始 BAM&lt;/strong>，但在重复博弈中的&lt;strong>适应性一致性&lt;/strong>方面表现不佳。&lt;/li>
&lt;li>GPT-4o 和 LLaMA-3.3-70B 在单次博弈中展现了&lt;strong>优秀的角色一致性&lt;/strong>。&lt;/li>
&lt;/ul>
&lt;h3 id="2-prime-router-框架">2. PRIME-Router 框架&lt;/h3>
&lt;p>为克服适应性和一致性的局限，我们提出了 &lt;strong>PRIME-Router&lt;/strong>，一种模块化 MoE 风格的架构：&lt;/p>
&lt;ul>
&lt;li>生成&lt;strong>专业化子角色&lt;/strong>（例如 Empathy Enforcer、Strategic Planner）&lt;/li>
&lt;li>根据经验性能为每个子角色分配&lt;strong>最合适的 LLM&lt;/strong>&lt;/li>
&lt;li>通过&lt;strong>协作模式&lt;/strong>（例如 star、debate、chain）聚合多智能体输出&lt;/li>
&lt;/ul>
&lt;p>PRIME-Router 的提升效果：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>PCI&lt;/strong> 最高提升 &lt;strong>0.23&lt;/strong>&lt;/li>
&lt;li>&lt;strong>ASP&lt;/strong> 最高提升 &lt;strong>0.32&lt;/strong>
（在重复博弈中）。&lt;/li>
&lt;/ul>
&lt;h3 id="3-启示与展望">3. 启示与展望&lt;/h3>
&lt;ul>
&lt;li>LLM 能够&lt;strong>可信地模拟类人行为&lt;/strong>，但&lt;strong>策略深度&lt;/strong>和&lt;strong>长期角色保真度&lt;/strong>仍是挑战。&lt;/li>
&lt;li>PRIME-Router 为&lt;strong>社会科学实验&lt;/strong>、&lt;strong>政策建模&lt;/strong>和&lt;strong>在线平台模拟&lt;/strong>中的&lt;strong>高性价比 AI 智能体&lt;/strong>铺平了道路。&lt;/li>
&lt;/ul>
&lt;h2 id="结论">结论&lt;/h2>
&lt;p>本研究揭示了 LLM 在行为博弈模拟中的潜力与局限。像 PRIME-Router 这样的结构化多智能体设计显著增强了真实性，为实验社会科学中的&lt;strong>AI 驱动人类建模&lt;/strong>提供了新范式。&lt;/p>
&lt;p>[AAAI 2026 投稿] — 审稿中&lt;/p></description></item><item><title>RL for Stochastic Vaccine Allocation on Contact Networks</title><link>https://junfei-z.github.io/project/2_stock/</link><pubDate>Mon, 17 Mar 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/project/2_stock/</guid><description>&lt;p>Bridged deterministic optimal control and reinforcement learning to develop a stochastic vaccine allocation strategy on individual-level contact networks, enabling robust pandemic response modeling.&lt;/p>
&lt;h2 id="highlights">Highlights&lt;/h2>
&lt;ul>
&lt;li>Modeled epidemic spread using a high-dimensional continuous-time Markov process (CTMP) on a contact graph.&lt;/li>
&lt;li>Designed a vaccination policy using policy gradient-based RL, warm-started from a mean-field ODE solution.&lt;/li>
&lt;li>Evaluated policies on metrics like mortality and hospitalizations across synthetic and real-world network topologies.&lt;/li>
&lt;/ul>
&lt;h2 id="tools">Tools&lt;/h2>
&lt;p>Python, PyTorch, NetworkX, OpenAI Gym&lt;/p></description></item><item><title>基于 Reinforcement Learning 的接触网络随机疫苗分配策略</title><link>https://junfei-z.github.io/zh/project/2_stock/</link><pubDate>Mon, 17 Mar 2025 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/project/2_stock/</guid><description>&lt;p>将确定性最优控制与 Reinforcement Learning 相结合，开发了个体级接触网络上的随机疫苗分配策略，实现了鲁棒的疫情响应建模。&lt;/p>
&lt;h2 id="项目亮点">项目亮点&lt;/h2>
&lt;ul>
&lt;li>在接触图上使用高维连续时间马尔可夫过程 (CTMP) 对疫情传播进行建模。&lt;/li>
&lt;li>设计了基于 Policy Gradient 的 RL 疫苗接种策略，并以 Mean-Field ODE 解作为热启动。&lt;/li>
&lt;li>在合成和真实世界网络拓扑上评估了策略在死亡率和住院率等指标上的表现。&lt;/li>
&lt;/ul>
&lt;h2 id="工具">工具&lt;/h2>
&lt;p>Python, PyTorch, NetworkX, OpenAI Gym&lt;/p></description></item><item><title>Audio-based Material Classification Using Hybrid CNN and Logistic Regression</title><link>https://junfei-z.github.io/project/3_internationchess/</link><pubDate>Sun, 15 Dec 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/project/3_internationchess/</guid><description>&lt;p>Developed a hybrid model for classifying audio recordings of knocking sounds from seven materials (e.g., table, glass, blackboard). The model combines 1D CNN on raw audio, 2D CNN on MFCC features, and logistic regression into an ensemble system. Achieved 94% accuracy and a weighted F1-score of 0.9426 on evaluation data.&lt;/p>
&lt;p>Collected 520 real-world samples using smartphone recordings with varying knock strengths. Applied noise reduction and feature extraction (MFCC, temporal, spectral features). Evaluated over diverse CNN combinations, demonstrating effective integration of deep learning with traditional methods. Proposed improvements include attention mechanisms, mixup augmentation, and expanded data collection for better generalization.&lt;/p></description></item><item><title>基于混合 CNN 与 Logistic Regression 的音频材质分类</title><link>https://junfei-z.github.io/zh/project/3_internationchess/</link><pubDate>Sun, 15 Dec 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/project/3_internationchess/</guid><description>&lt;p>开发了一种混合模型，用于对七种材质（如桌面、玻璃、黑板）的敲击音频录音进行分类。该模型将基于原始音频的 1D CNN、基于 MFCC 特征的 2D CNN 和 Logistic Regression 组合为集成系统，在评估数据上达到了 94% 的准确率和 0.9426 的加权 F1-score。&lt;/p>
&lt;p>使用智能手机录制了 520 个不同敲击力度的真实样本。应用了降噪和特征提取（MFCC、时域特征、频域特征）。在多种 CNN 组合上进行了评估，展示了深度学习与传统方法的有效融合。提出的改进方向包括 Attention 机制、Mixup 数据增强以及扩展数据采集以提升泛化能力。&lt;/p></description></item><item><title>Minimizing Maximum Age of Service in Virtualized Green IoT Networks</title><link>https://junfei-z.github.io/research/minimizing-maximum-age-of-service-in-virtualized-green-iot-networks/</link><pubDate>Sat, 07 Dec 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/research/minimizing-maximum-age-of-service-in-virtualized-green-iot-networks/</guid><description>&lt;p>This project addresses the challenge of embedding and scheduling applications in solar-powered green IoT networks, with the goal of minimizing the &lt;strong>maximum Age of Service (AoS)&lt;/strong> — a freshness metric indicating the delay between data generation and service completion.&lt;/p>
&lt;h2 id="objectives">Objectives&lt;/h2>
&lt;p>The research focuses on virtualized, computation-enabled IoT infrastructures powered by &lt;strong>renewable energy&lt;/strong> (solar). The applications are modeled as &lt;strong>Directed Acyclic Graphs (DAGs)&lt;/strong> with &lt;strong>Virtual Network Functions (VNFs)&lt;/strong> that must be executed under fluctuating energy and computational constraints.&lt;/p>
&lt;h2 id="key-contributions">Key Contributions&lt;/h2>
&lt;h3 id="mixed-integer-linear-programming-milp-formulation">Mixed Integer Linear Programming (MILP) Formulation&lt;/h3>
&lt;ul>
&lt;li>Proposed the &lt;strong>first MILP model&lt;/strong> to jointly optimize:
&lt;ul>
&lt;li>Device selection and sampling time&lt;/li>
&lt;li>DAG request embedding decision&lt;/li>
&lt;li>Energy consumption at devices, gateways, and servers&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>Objective: minimize the &lt;strong>maximum AoS&lt;/strong> across all DAG requests.&lt;/li>
&lt;/ul>
&lt;h3 id="heuristic-and-predictive-control-solutions">Heuristic and Predictive Control Solutions&lt;/h3>
&lt;ul>
&lt;li>Developed &lt;strong>GreedyOL&lt;/strong>, a fast heuristic that embeds DAGs based on current AoS.&lt;/li>
&lt;li>Proposed &lt;strong>RHCOP&lt;/strong>, a &lt;strong>Receding Horizon Control Optimization&lt;/strong> framework:
&lt;ul>
&lt;li>Utilizes &lt;strong>Gaussian Mixture Models (GMMs)&lt;/strong> to predict solar energy arrivals and wireless channel gains.&lt;/li>
&lt;li>Enables real-time scheduling using only causal (non-future) information.&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;h3 id="results--insights">Results &amp;amp; Insights&lt;/h3>
&lt;ul>
&lt;li>RHCOP achieves a &lt;strong>1.07×&lt;/strong> and GreedyOL a &lt;strong>1.13×&lt;/strong> min-max AoS compared to optimal MILP.&lt;/li>
&lt;li>More gateways and servers reduce AoS due to enhanced redundancy and flexibility.&lt;/li>
&lt;li>Equal numbers of &lt;strong>VNF-Cs&lt;/strong> (collection) and &lt;strong>VNF-Ps&lt;/strong> (processing) yield optimal freshness.&lt;/li>
&lt;/ul>
&lt;h2 id="broader-impact">Broader Impact&lt;/h2>
&lt;p>The proposed system lays groundwork for &lt;strong>energy-aware, delay-sensitive IoT applications&lt;/strong>, especially in &lt;strong>remote or energy-constrained environments&lt;/strong>. The results provide insights into the tradeoffs between &lt;strong>computation freshness&lt;/strong>, &lt;strong>resource allocation&lt;/strong>, and &lt;strong>green network deployment&lt;/strong> strategies.&lt;/p>
&lt;p>📄 [IEEE Transactions on Services Computing Submission] — Coming Soon&lt;/p></description></item><item><title>Minimizing Maximum Age of Service in Virtualized Green IoT Networks</title><link>https://junfei-z.github.io/zh/research/minimizing-maximum-age-of-service-in-virtualized-green-iot-networks/</link><pubDate>Sat, 07 Dec 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/research/minimizing-maximum-age-of-service-in-virtualized-green-iot-networks/</guid><description>&lt;p>本项目解决了在太阳能驱动的绿色 IoT 网络中嵌入和调度应用的挑战，目标是最小化&lt;strong>最大 Age of Service (AoS)&lt;/strong> — 一个表示数据生成到服务完成之间延迟的新鲜度指标。&lt;/p>
&lt;h2 id="目标">目标&lt;/h2>
&lt;p>本研究聚焦于由&lt;strong>可再生能源&lt;/strong>（太阳能）驱动的虚拟化、具备计算能力的 IoT 基础设施。应用被建模为包含 &lt;strong>Virtual Network Functions (VNFs)&lt;/strong> 的 &lt;strong>Directed Acyclic Graphs (DAGs)&lt;/strong>，需要在波动的能量和计算约束下执行。&lt;/p>
&lt;h2 id="主要贡献">主要贡献&lt;/h2>
&lt;h3 id="mixed-integer-linear-programming-milp-建模">Mixed Integer Linear Programming (MILP) 建模&lt;/h3>
&lt;ul>
&lt;li>提出了&lt;strong>首个 MILP 模型&lt;/strong>，联合优化：
&lt;ul>
&lt;li>设备选择与采样时间&lt;/li>
&lt;li>DAG 请求嵌入决策&lt;/li>
&lt;li>设备、网关和服务器的能耗&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>目标：最小化所有 DAG 请求的&lt;strong>最大 AoS&lt;/strong>。&lt;/li>
&lt;/ul>
&lt;h3 id="启发式与预测控制方案">启发式与预测控制方案&lt;/h3>
&lt;ul>
&lt;li>开发了 &lt;strong>GreedyOL&lt;/strong>，一种基于当前 AoS 嵌入 DAG 的快速启发式算法。&lt;/li>
&lt;li>提出了 &lt;strong>RHCOP&lt;/strong>，一种 &lt;strong>Receding Horizon Control Optimization&lt;/strong> 框架：
&lt;ul>
&lt;li>利用 &lt;strong>Gaussian Mixture Models (GMMs)&lt;/strong> 预测太阳能到达量和无线信道增益。&lt;/li>
&lt;li>仅使用因果（非未来）信息实现实时调度。&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;h3 id="结果与洞察">结果与洞察&lt;/h3>
&lt;ul>
&lt;li>RHCOP 实现了最优 MILP 的 &lt;strong>1.07 倍&lt;/strong> min-max AoS，GreedyOL 为 &lt;strong>1.13 倍&lt;/strong>。&lt;/li>
&lt;li>更多的网关和服务器由于增强的冗余性和灵活性而降低了 AoS。&lt;/li>
&lt;li>&lt;strong>VNF-C&lt;/strong>（采集）和 &lt;strong>VNF-P&lt;/strong>（处理）数量相等时可获得最优新鲜度。&lt;/li>
&lt;/ul>
&lt;h2 id="更广泛的影响">更广泛的影响&lt;/h2>
&lt;p>所提出的系统为&lt;strong>能耗感知、延迟敏感的 IoT 应用&lt;/strong>奠定了基础，尤其适用于&lt;strong>偏远或能源受限的环境&lt;/strong>。研究结果揭示了&lt;strong>计算新鲜度&lt;/strong>、&lt;strong>资源分配&lt;/strong>与&lt;strong>绿色网络部署&lt;/strong>策略之间的权衡关系。&lt;/p>
&lt;p>[IEEE Transactions on Services Computing 投稿] — 即将发表&lt;/p></description></item><item><title>Projects</title><link>https://junfei-z.github.io/projects/</link><pubDate>Sun, 19 May 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/projects/</guid><description/></item><item><title>Samples</title><link>https://junfei-z.github.io/samples/</link><pubDate>Sun, 19 May 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/samples/</guid><description/></item><item><title>写作样本</title><link>https://junfei-z.github.io/zh/samples/</link><pubDate>Sun, 19 May 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/samples/</guid><description/></item><item><title>项目</title><link>https://junfei-z.github.io/zh/projects/</link><pubDate>Sun, 19 May 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/projects/</guid><description/></item><item><title>Undergraduate Thesis - Scheduling in Serverless Computing for Solar-Powered IoT Networks</title><link>https://junfei-z.github.io/samples/4_spam/</link><pubDate>Tue, 30 Apr 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/samples/4_spam/</guid><description>&lt;p>This undergraduate thesis proposes a two-phase optimization framework for solar-powered IoT networks, focusing on dynamic task allocation and energy-aware function configuration. A MILP benchmark and a GMM-enhanced Receding Horizon Control algorithm were developed to improve efficiency and adapt to fluctuating energy and computation conditions.&lt;/p></description></item><item><title>本科毕业论文 - Scheduling in Serverless Computing for Solar-Powered IoT Networks</title><link>https://junfei-z.github.io/zh/samples/4_spam/</link><pubDate>Tue, 30 Apr 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/samples/4_spam/</guid><description>&lt;p>本科毕业论文提出了一种面向太阳能供电 IoT 网络的两阶段优化框架，重点研究动态任务分配和能量感知的函数配置。开发了 MILP 基准测试和基于 GMM 增强的 Receding Horizon Control 算法，以提升效率并适应波动的能量和计算条件。&lt;/p></description></item><item><title>Task Offloading and Approximate Computing in Solar Powered IoT Networks</title><link>https://junfei-z.github.io/research/task-offloading-and-approximate-computing-in-solar-powered-iot-networks/</link><pubDate>Sun, 07 Jan 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/research/task-offloading-and-approximate-computing-in-solar-powered-iot-networks/</guid><description>&lt;p>This research proposes a novel framework for minimizing the &lt;strong>total energy consumption&lt;/strong> of solar-powered IoT networks through &lt;strong>task offloading and approximate computing&lt;/strong>. Devices can choose between local execution (exact or approximate) or offloading tasks to a solar-powered edge server.&lt;/p>
&lt;h2 id="core-objectives">Core Objectives&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>Reduce energy usage&lt;/strong> by allowing approximate task execution when tolerable errors are acceptable.&lt;/li>
&lt;li>&lt;strong>Leverage digital twins (DTs)&lt;/strong> to estimate future energy availability and channel conditions.&lt;/li>
&lt;li>&lt;strong>Optimize offloading decisions&lt;/strong> and resource allocation across time slots and channels.&lt;/li>
&lt;/ul>
&lt;h2 id="technical-highlights">Technical Highlights&lt;/h2>
&lt;h3 id="milp-formulation">MILP Formulation&lt;/h3>
&lt;ul>
&lt;li>Designed the &lt;strong>first MILP&lt;/strong> to jointly optimize:
&lt;ul>
&lt;li>Task offloading decisions&lt;/li>
&lt;li>Approximate vs. exact execution&lt;/li>
&lt;li>Channel allocation&lt;/li>
&lt;li>Virtual machine (VM) assignment&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>Captures constraints on energy arrivals, CPU cycles, approximation error bounds, and VM capacity.&lt;/li>
&lt;/ul>
&lt;h3 id="dt-assisted-receding-horizon-control-dt-rhc">DT-Assisted Receding Horizon Control (DT-RHC)&lt;/h3>
&lt;ul>
&lt;li>Introduced a &lt;strong>DT-based control algorithm&lt;/strong> using:
&lt;ul>
&lt;li>&lt;strong>Gaussian Mixture Models (GMMs)&lt;/strong> to predict energy and channel gain&lt;/li>
&lt;li>Sliding-window MILP optimization for dynamic scheduling&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>Achieves energy usage within &lt;strong>1.62×&lt;/strong> of MILP optimal while requiring only &lt;strong>causal (past) data&lt;/strong>&lt;/li>
&lt;/ul>
&lt;h3 id="results--evaluation">Results &amp;amp; Evaluation&lt;/h3>
&lt;ul>
&lt;li>DT-RHC significantly outperforms random strategies across metrics such as:
&lt;ul>
&lt;li>Energy consumption vs. number of devices&lt;/li>
&lt;li>Impact of approximation ratios&lt;/li>
&lt;li>Task completion within extended time horizons&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>Simulations conducted in Python + Gurobi over 100×100 m² deployments using realistic solar input and wireless models.&lt;/li>
&lt;/ul>
&lt;h2 id="conclusion">Conclusion&lt;/h2>
&lt;p>This study demonstrates the viability of integrating &lt;strong>approximate computing and intelligent offloading&lt;/strong> in &lt;strong>renewable-powered IoT environments&lt;/strong>. It provides a robust foundation for future &lt;strong>distributed optimization and adaptive energy-aware network control&lt;/strong>.&lt;/p>
&lt;p>&lt;a href="https://doi.org/10.1109/LNET.2023.3328893">IEEE Paper DOI: 10.1109/LNET.2023.3328893&lt;/a>&lt;/p></description></item><item><title>Task Offloading and Approximate Computing in Solar Powered IoT Networks</title><link>https://junfei-z.github.io/zh/research/task-offloading-and-approximate-computing-in-solar-powered-iot-networks/</link><pubDate>Sun, 07 Jan 2024 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/research/task-offloading-and-approximate-computing-in-solar-powered-iot-networks/</guid><description>&lt;p>本研究提出了一种新颖的框架，通过&lt;strong>任务卸载和近似计算&lt;/strong>来最小化太阳能驱动 IoT 网络的&lt;strong>总能耗&lt;/strong>。设备可以选择本地执行（精确或近似）或将任务卸载到太阳能驱动的边缘服务器。&lt;/p>
&lt;h2 id="核心目标">核心目标&lt;/h2>
&lt;ul>
&lt;li>在可容忍误差的情况下，通过允许近似任务执行来&lt;strong>降低能耗&lt;/strong>。&lt;/li>
&lt;li>&lt;strong>利用 Digital Twin (DT)&lt;/strong> 估计未来的能量可用性和信道条件。&lt;/li>
&lt;li>&lt;strong>优化卸载决策&lt;/strong>以及跨时隙和信道的资源分配。&lt;/li>
&lt;/ul>
&lt;h2 id="技术亮点">技术亮点&lt;/h2>
&lt;h3 id="milp-建模">MILP 建模&lt;/h3>
&lt;ul>
&lt;li>设计了&lt;strong>首个 MILP&lt;/strong>，联合优化：
&lt;ul>
&lt;li>任务卸载决策&lt;/li>
&lt;li>近似与精确执行&lt;/li>
&lt;li>信道分配&lt;/li>
&lt;li>虚拟机（VM）分配&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>捕获了能量到达、CPU 周期、近似误差界和 VM 容量等约束条件。&lt;/li>
&lt;/ul>
&lt;h3 id="dt-辅助的滑动窗口控制-dt-rhc">DT 辅助的滑动窗口控制 (DT-RHC)&lt;/h3>
&lt;ul>
&lt;li>引入了基于 &lt;strong>DT 的控制算法&lt;/strong>，使用：
&lt;ul>
&lt;li>&lt;strong>Gaussian Mixture Models (GMMs)&lt;/strong> 预测能量和信道增益&lt;/li>
&lt;li>滑动窗口 MILP 优化实现动态调度&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>仅使用&lt;strong>因果（历史）数据&lt;/strong>即可实现 MILP 最优值 &lt;strong>1.62 倍&lt;/strong>以内的能耗&lt;/li>
&lt;/ul>
&lt;h3 id="结果与评估">结果与评估&lt;/h3>
&lt;ul>
&lt;li>DT-RHC 在以下指标上显著优于随机策略：
&lt;ul>
&lt;li>能耗与设备数量的关系&lt;/li>
&lt;li>近似比率的影响&lt;/li>
&lt;li>扩展时间范围内的任务完成率&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>仿真在 100×100 m² 部署上使用 Python + Gurobi 进行，采用真实的太阳能输入和无线模型。&lt;/li>
&lt;/ul>
&lt;h2 id="结论">结论&lt;/h2>
&lt;p>本研究证明了在&lt;strong>可再生能源驱动的 IoT 环境&lt;/strong>中集成&lt;strong>近似计算和智能卸载&lt;/strong>的可行性。它为未来的&lt;strong>分布式优化和自适应能耗感知网络控制&lt;/strong>提供了坚实基础。&lt;/p>
&lt;p>&lt;a href="https://doi.org/10.1109/LNET.2023.3328893">IEEE Paper DOI: 10.1109/LNET.2023.3328893&lt;/a>&lt;/p></description></item><item><title>🎉 Easily create your own simple yet highly customizable blog</title><link>https://junfei-z.github.io/post/get-started/</link><pubDate>Fri, 27 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/post/get-started/</guid><description>&lt;p>Welcome 👋&lt;/p>
&lt;details class="print:hidden xl:hidden" open>
&lt;summary>Table of Contents&lt;/summary>
&lt;div class="text-sm">
&lt;nav id="TableOfContents">
&lt;ul>
&lt;li>&lt;a href="#overview">Overview&lt;/a>
&lt;ul>
&lt;li>&lt;a href="#get-started">Get Started&lt;/a>&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;a href="#crowd-funded-open-source-software">Crowd-funded open-source software&lt;/a>
&lt;ul>
&lt;li>&lt;a href="#-click-here-to-become-a-sponsor-and-help-support-hugo-bloxs-future-httpshugobloxcomsponsor">&lt;a href="https://hugoblox.com/sponsor/">❤️ Click here to become a sponsor and help support Hugo Blox&amp;rsquo;s future ❤️&lt;/a>&lt;/a>&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;a href="#ecosystem">Ecosystem&lt;/a>&lt;/li>
&lt;li>&lt;a href="#inspiration">Inspiration&lt;/a>&lt;/li>
&lt;li>&lt;a href="#features">Features&lt;/a>&lt;/li>
&lt;li>&lt;a href="#themes">Themes&lt;/a>&lt;/li>
&lt;li>&lt;a href="#license">License&lt;/a>&lt;/li>
&lt;/ul>
&lt;/nav>
&lt;/div>
&lt;/details>
&lt;h2 id="overview">Overview&lt;/h2>
&lt;ol>
&lt;li>The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site&lt;/li>
&lt;li>The template can be modified and customised to suit your needs. It&amp;rsquo;s a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a &lt;strong>no-code solution (write in Markdown and customize with YAML parameters)&lt;/strong> and having &lt;strong>flexibility to later add even deeper personalization with HTML and CSS&lt;/strong>&lt;/li>
&lt;li>You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more&lt;/li>
&lt;/ol>
&lt;h3 id="get-started">Get Started&lt;/h3>
&lt;ul>
&lt;li>👉 &lt;a href="https://hugoblox.com/templates/">&lt;strong>Create a new site&lt;/strong>&lt;/a>&lt;/li>
&lt;li>📚 &lt;a href="https://docs.hugoblox.com/">&lt;strong>Personalize your site&lt;/strong>&lt;/a>&lt;/li>
&lt;li>💬 &lt;a href="https://discord.gg/z8wNYzb">Chat with the &lt;strong>Hugo Blox community&lt;/strong>&lt;/a> or &lt;a href="https://discourse.gohugo.io">&lt;strong>Hugo community&lt;/strong>&lt;/a>&lt;/li>
&lt;li>🐦 Twitter: &lt;a href="https://twitter.com/GetResearchDev">@GetResearchDev&lt;/a> &lt;a href="https://twitter.com/GeorgeCushen">@GeorgeCushen&lt;/a> #MadeWithHugoBlox&lt;/li>
&lt;li>💡 &lt;a href="https://github.com/HugoBlox/hugo-blox-builder/issues">Request a &lt;strong>feature&lt;/strong> or report a &lt;strong>bug&lt;/strong> for &lt;em>Hugo Blox&lt;/em>&lt;/a>&lt;/li>
&lt;li>⬆️ &lt;strong>Updating Hugo Blox?&lt;/strong> View the &lt;a href="https://docs.hugoblox.com/reference/update/">Update Guide&lt;/a> and &lt;a href="https://github.com/HugoBlox/hugo-blox-builder/releases">Release Notes&lt;/a>&lt;/li>
&lt;/ul>
&lt;h2 id="crowd-funded-open-source-software">Crowd-funded open-source software&lt;/h2>
&lt;p>To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.&lt;/p>
&lt;h3 id="-click-here-to-become-a-sponsor-and-help-support-hugo-bloxs-future-httpshugobloxcomsponsor">&lt;a href="https://hugoblox.com/sponsor/">❤️ Click here to become a sponsor and help support Hugo Blox&amp;rsquo;s future ❤️&lt;/a>&lt;/h3>
&lt;p>As a token of appreciation for sponsoring, you can &lt;strong>unlock &lt;a href="https://hugoblox.com/sponsor/">these&lt;/a> awesome rewards and extra features 🦄✨&lt;/strong>&lt;/p>
&lt;h2 id="ecosystem">Ecosystem&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>&lt;a href="https://github.com/GetRD/academic-file-converter">Bibtex To Markdown&lt;/a>:&lt;/strong> Automatically import publications from BibTeX&lt;/li>
&lt;/ul>
&lt;h2 id="inspiration">Inspiration&lt;/h2>
&lt;p>&lt;a href="https://hugoblox.com/creators/">Learn what other &lt;strong>creators&lt;/strong>&lt;/a> are building with this template.&lt;/p>
&lt;h2 id="features">Features&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>Page builder&lt;/strong> - Create &lt;em>anything&lt;/em> with no-code &lt;a href="https://hugoblox.com/blocks/">&lt;strong>blocks&lt;/strong>&lt;/a> and &lt;a href="https://docs.hugoblox.com/reference/markdown/">&lt;strong>elements&lt;/strong>&lt;/a>&lt;/li>
&lt;li>&lt;strong>Edit any type of content&lt;/strong> - Blog posts, publications, talks, slides, projects, and more!&lt;/li>
&lt;li>&lt;strong>Create content&lt;/strong> in &lt;a href="https://docs.hugoblox.com/reference/markdown/">&lt;strong>Markdown&lt;/strong>&lt;/a>, &lt;a href="https://docs.hugoblox.com/getting-started/cms/">&lt;strong>Jupyter&lt;/strong>&lt;/a>, or &lt;a href="https://docs.hugoblox.com/getting-started/cms/">&lt;strong>RStudio&lt;/strong>&lt;/a>&lt;/li>
&lt;li>&lt;strong>Plugin System&lt;/strong> - Fully customizable &lt;a href="https://docs.hugoblox.com/getting-started/customize/">&lt;strong>color&lt;/strong> and &lt;strong>font themes&lt;/strong>&lt;/a>&lt;/li>
&lt;li>&lt;strong>Display Code and Math&lt;/strong> - Code syntax highlighting and LaTeX math supported&lt;/li>
&lt;li>&lt;strong>Integrations&lt;/strong> - &lt;a href="https://analytics.google.com">Google Analytics&lt;/a>, &lt;a href="https://disqus.com">Disqus commenting&lt;/a>, Maps, Contact Forms, and more!&lt;/li>
&lt;li>&lt;strong>Beautiful Site&lt;/strong> - Simple and refreshing one-page design&lt;/li>
&lt;li>&lt;strong>Industry-Leading SEO&lt;/strong> - Help get your website found on search engines and social media&lt;/li>
&lt;li>&lt;strong>Media Galleries&lt;/strong> - Display your images and videos with captions in a customizable gallery&lt;/li>
&lt;li>&lt;strong>Mobile Friendly&lt;/strong> - Look amazing on every screen with a mobile friendly version of your site&lt;/li>
&lt;li>&lt;strong>Multi-language&lt;/strong> - 35+ language packs including English, 中文, and Português&lt;/li>
&lt;li>&lt;strong>Multi-user&lt;/strong> - Each author gets their own profile page&lt;/li>
&lt;li>&lt;strong>Privacy Pack&lt;/strong> - Assists with GDPR&lt;/li>
&lt;li>&lt;strong>Stand Out&lt;/strong> - Bring your site to life with animation, parallax backgrounds, and scroll effects&lt;/li>
&lt;li>&lt;strong>One-Click Deployment&lt;/strong> - No servers. No databases. Only files.&lt;/li>
&lt;/ul>
&lt;h2 id="themes">Themes&lt;/h2>
&lt;p>Hugo Blox and its templates come with &lt;strong>automatic day (light) and night (dark) mode&lt;/strong> built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.&lt;/p>
&lt;p>&lt;a href="https://docs.hugoblox.com/getting-started/customize/">Choose a stunning &lt;strong>theme&lt;/strong> and &lt;strong>font&lt;/strong>&lt;/a> for your site. Themes are fully customizable.&lt;/p>
&lt;h2 id="license">License&lt;/h2>
&lt;p>Copyright 2016-present &lt;a href="https://georgecushen.com">George Cushen&lt;/a>.&lt;/p>
&lt;p>Released under the &lt;a href="https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md">MIT&lt;/a> license.&lt;/p></description></item><item><title>🎉 Easily create your own simple yet highly customizable blog</title><link>https://junfei-z.github.io/zh/post/get-started/</link><pubDate>Fri, 27 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/post/get-started/</guid><description>&lt;p>Welcome 👋&lt;/p>
&lt;details class="print:hidden xl:hidden" open>
&lt;summary>Table of Contents&lt;/summary>
&lt;div class="text-sm">
&lt;nav id="TableOfContents">
&lt;ul>
&lt;li>&lt;a href="#overview">Overview&lt;/a>
&lt;ul>
&lt;li>&lt;a href="#get-started">Get Started&lt;/a>&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;a href="#crowd-funded-open-source-software">Crowd-funded open-source software&lt;/a>
&lt;ul>
&lt;li>&lt;a href="#-click-here-to-become-a-sponsor-and-help-support-hugo-bloxs-future-httpshugobloxcomsponsor">&lt;a href="https://hugoblox.com/sponsor/">❤️ Click here to become a sponsor and help support Hugo Blox&amp;rsquo;s future ❤️&lt;/a>&lt;/a>&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;a href="#ecosystem">Ecosystem&lt;/a>&lt;/li>
&lt;li>&lt;a href="#inspiration">Inspiration&lt;/a>&lt;/li>
&lt;li>&lt;a href="#features">Features&lt;/a>&lt;/li>
&lt;li>&lt;a href="#themes">Themes&lt;/a>&lt;/li>
&lt;li>&lt;a href="#license">License&lt;/a>&lt;/li>
&lt;/ul>
&lt;/nav>
&lt;/div>
&lt;/details>
&lt;h2 id="overview">Overview&lt;/h2>
&lt;ol>
&lt;li>The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site&lt;/li>
&lt;li>The template can be modified and customised to suit your needs. It&amp;rsquo;s a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a &lt;strong>no-code solution (write in Markdown and customize with YAML parameters)&lt;/strong> and having &lt;strong>flexibility to later add even deeper personalization with HTML and CSS&lt;/strong>&lt;/li>
&lt;li>You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more&lt;/li>
&lt;/ol>
&lt;h3 id="get-started">Get Started&lt;/h3>
&lt;ul>
&lt;li>👉 &lt;a href="https://hugoblox.com/templates/">&lt;strong>Create a new site&lt;/strong>&lt;/a>&lt;/li>
&lt;li>📚 &lt;a href="https://docs.hugoblox.com/">&lt;strong>Personalize your site&lt;/strong>&lt;/a>&lt;/li>
&lt;li>💬 &lt;a href="https://discord.gg/z8wNYzb">Chat with the &lt;strong>Hugo Blox community&lt;/strong>&lt;/a> or &lt;a href="https://discourse.gohugo.io">&lt;strong>Hugo community&lt;/strong>&lt;/a>&lt;/li>
&lt;li>🐦 Twitter: &lt;a href="https://twitter.com/GetResearchDev">@GetResearchDev&lt;/a> &lt;a href="https://twitter.com/GeorgeCushen">@GeorgeCushen&lt;/a> #MadeWithHugoBlox&lt;/li>
&lt;li>💡 &lt;a href="https://github.com/HugoBlox/hugo-blox-builder/issues">Request a &lt;strong>feature&lt;/strong> or report a &lt;strong>bug&lt;/strong> for &lt;em>Hugo Blox&lt;/em>&lt;/a>&lt;/li>
&lt;li>⬆️ &lt;strong>Updating Hugo Blox?&lt;/strong> View the &lt;a href="https://docs.hugoblox.com/reference/update/">Update Guide&lt;/a> and &lt;a href="https://github.com/HugoBlox/hugo-blox-builder/releases">Release Notes&lt;/a>&lt;/li>
&lt;/ul>
&lt;h2 id="crowd-funded-open-source-software">Crowd-funded open-source software&lt;/h2>
&lt;p>To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.&lt;/p>
&lt;h3 id="-click-here-to-become-a-sponsor-and-help-support-hugo-bloxs-future-httpshugobloxcomsponsor">&lt;a href="https://hugoblox.com/sponsor/">❤️ Click here to become a sponsor and help support Hugo Blox&amp;rsquo;s future ❤️&lt;/a>&lt;/h3>
&lt;p>As a token of appreciation for sponsoring, you can &lt;strong>unlock &lt;a href="https://hugoblox.com/sponsor/">these&lt;/a> awesome rewards and extra features 🦄✨&lt;/strong>&lt;/p>
&lt;h2 id="ecosystem">Ecosystem&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>&lt;a href="https://github.com/GetRD/academic-file-converter">Bibtex To Markdown&lt;/a>:&lt;/strong> Automatically import publications from BibTeX&lt;/li>
&lt;/ul>
&lt;h2 id="inspiration">Inspiration&lt;/h2>
&lt;p>&lt;a href="https://hugoblox.com/creators/">Learn what other &lt;strong>creators&lt;/strong>&lt;/a> are building with this template.&lt;/p>
&lt;h2 id="features">Features&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>Page builder&lt;/strong> - Create &lt;em>anything&lt;/em> with no-code &lt;a href="https://hugoblox.com/blocks/">&lt;strong>blocks&lt;/strong>&lt;/a> and &lt;a href="https://docs.hugoblox.com/reference/markdown/">&lt;strong>elements&lt;/strong>&lt;/a>&lt;/li>
&lt;li>&lt;strong>Edit any type of content&lt;/strong> - Blog posts, publications, talks, slides, projects, and more!&lt;/li>
&lt;li>&lt;strong>Create content&lt;/strong> in &lt;a href="https://docs.hugoblox.com/reference/markdown/">&lt;strong>Markdown&lt;/strong>&lt;/a>, &lt;a href="https://docs.hugoblox.com/getting-started/cms/">&lt;strong>Jupyter&lt;/strong>&lt;/a>, or &lt;a href="https://docs.hugoblox.com/getting-started/cms/">&lt;strong>RStudio&lt;/strong>&lt;/a>&lt;/li>
&lt;li>&lt;strong>Plugin System&lt;/strong> - Fully customizable &lt;a href="https://docs.hugoblox.com/getting-started/customize/">&lt;strong>color&lt;/strong> and &lt;strong>font themes&lt;/strong>&lt;/a>&lt;/li>
&lt;li>&lt;strong>Display Code and Math&lt;/strong> - Code syntax highlighting and LaTeX math supported&lt;/li>
&lt;li>&lt;strong>Integrations&lt;/strong> - &lt;a href="https://analytics.google.com">Google Analytics&lt;/a>, &lt;a href="https://disqus.com">Disqus commenting&lt;/a>, Maps, Contact Forms, and more!&lt;/li>
&lt;li>&lt;strong>Beautiful Site&lt;/strong> - Simple and refreshing one-page design&lt;/li>
&lt;li>&lt;strong>Industry-Leading SEO&lt;/strong> - Help get your website found on search engines and social media&lt;/li>
&lt;li>&lt;strong>Media Galleries&lt;/strong> - Display your images and videos with captions in a customizable gallery&lt;/li>
&lt;li>&lt;strong>Mobile Friendly&lt;/strong> - Look amazing on every screen with a mobile friendly version of your site&lt;/li>
&lt;li>&lt;strong>Multi-language&lt;/strong> - 35+ language packs including English, 中文, and Português&lt;/li>
&lt;li>&lt;strong>Multi-user&lt;/strong> - Each author gets their own profile page&lt;/li>
&lt;li>&lt;strong>Privacy Pack&lt;/strong> - Assists with GDPR&lt;/li>
&lt;li>&lt;strong>Stand Out&lt;/strong> - Bring your site to life with animation, parallax backgrounds, and scroll effects&lt;/li>
&lt;li>&lt;strong>One-Click Deployment&lt;/strong> - No servers. No databases. Only files.&lt;/li>
&lt;/ul>
&lt;h2 id="themes">Themes&lt;/h2>
&lt;p>Hugo Blox and its templates come with &lt;strong>automatic day (light) and night (dark) mode&lt;/strong> built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.&lt;/p>
&lt;p>&lt;a href="https://docs.hugoblox.com/getting-started/customize/">Choose a stunning &lt;strong>theme&lt;/strong> and &lt;strong>font&lt;/strong>&lt;/a> for your site. Themes are fully customizable.&lt;/p>
&lt;h2 id="license">License&lt;/h2>
&lt;p>Copyright 2016-present &lt;a href="https://georgecushen.com">George Cushen&lt;/a>.&lt;/p>
&lt;p>Released under the &lt;a href="https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md">MIT&lt;/a> license.&lt;/p></description></item><item><title>🧠 Sharpen your thinking with a second brain</title><link>https://junfei-z.github.io/post/second-brain/</link><pubDate>Thu, 26 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/post/second-brain/</guid><description>&lt;p>Create a personal knowledge base and share your knowledge with your peers.&lt;/p>
&lt;p>Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.&lt;/p>
&lt;p>Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.&lt;/p>
&lt;p>Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.&lt;/p>
&lt;h2 id="mindmaps">Mindmaps&lt;/h2>
&lt;p>Hugo Blox supports a Markdown extension for mindmaps.&lt;/p>
&lt;p>With this open format, can even edit your mindmaps in other popular tools such as Obsidian.&lt;/p>
&lt;p>Simply insert a Markdown code block labelled as &lt;code>markmap&lt;/code> and optionally set the height of the mindmap as shown in the example below.&lt;/p>
&lt;p>Mindmaps can be created by simply writing the items as a Markdown list within the &lt;code>markmap&lt;/code> code block, indenting each item to create as many sub-levels as you need:&lt;/p>
&lt;div class="highlight">
&lt;pre class="chroma">
&lt;code>
```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```
&lt;/code>
&lt;/pre>
&lt;/div>
&lt;p>renders as&lt;/p>
&lt;div class="highlight" height="200px">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">- Hugo Modules
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Hugo Blox
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - blox-plugins-netlify
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - blox-plugins-netlify-cms
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - blox-plugins-reveal
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>Anh here&amp;rsquo;s a more advanced mindmap with formatting, code blocks, and math:&lt;/p>
&lt;div class="highlight">
&lt;pre class="chroma">
&lt;code>
```markmap
- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```
&lt;/code>
&lt;/pre>
&lt;/div>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">- Mindmaps
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Links
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - [Hugo Blox Docs](https://docs.hugoblox.com/)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - [Discord Community](https://discord.gg/z8wNYzb)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Features
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Markdown formatting
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - **inline** ~~text~~ *styles*
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - multiline
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> text
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - `inline code`
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> -
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> ```js
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> console.log(&amp;#39;hello&amp;#39;);
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> console.log(&amp;#39;code block&amp;#39;);
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> ```
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="highlighting">Highlighting&lt;/h2>
&lt;p>&lt;mark>Highlight&lt;/mark> important text with &lt;code>mark&lt;/code>:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">mark&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>Highlighted text&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">mark&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="callouts">Callouts&lt;/h2>
&lt;p>Use &lt;a href="https://docs.hugoblox.com/reference/markdown/#callouts">callouts&lt;/a> (aka &lt;em>asides&lt;/em>, &lt;em>hints&lt;/em>, or &lt;em>alerts&lt;/em>) to draw attention to notes, tips, and warnings.&lt;/p>
&lt;p>By wrapping a paragraph in &lt;code>{{% callout note %}} ... {{% /callout %}}&lt;/code>, it will render as an aside.&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{% callout note %}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{% /callout %}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.&lt;/span>
&lt;/div>
&lt;p>Or use the &lt;code>warning&lt;/code> callout type so your readers don&amp;rsquo;t miss critical details:&lt;/p>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-yellow-100 dark:bg-yellow-900">
&lt;span class="pr-3 pt-1 text-red-400">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.&lt;/span>
&lt;/div>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>🧠 Sharpen your thinking with a second brain</title><link>https://junfei-z.github.io/zh/post/second-brain/</link><pubDate>Thu, 26 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/post/second-brain/</guid><description>&lt;p>Create a personal knowledge base and share your knowledge with your peers.&lt;/p>
&lt;p>Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.&lt;/p>
&lt;p>Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.&lt;/p>
&lt;p>Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.&lt;/p>
&lt;h2 id="mindmaps">Mindmaps&lt;/h2>
&lt;p>Hugo Blox supports a Markdown extension for mindmaps.&lt;/p>
&lt;p>With this open format, can even edit your mindmaps in other popular tools such as Obsidian.&lt;/p>
&lt;p>Simply insert a Markdown code block labelled as &lt;code>markmap&lt;/code> and optionally set the height of the mindmap as shown in the example below.&lt;/p>
&lt;p>Mindmaps can be created by simply writing the items as a Markdown list within the &lt;code>markmap&lt;/code> code block, indenting each item to create as many sub-levels as you need:&lt;/p>
&lt;div class="highlight">
&lt;pre class="chroma">
&lt;code>
```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```
&lt;/code>
&lt;/pre>
&lt;/div>
&lt;p>renders as&lt;/p>
&lt;div class="highlight" height="200px">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">- Hugo Modules
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Hugo Blox
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - blox-plugins-netlify
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - blox-plugins-netlify-cms
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - blox-plugins-reveal
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>Anh here&amp;rsquo;s a more advanced mindmap with formatting, code blocks, and math:&lt;/p>
&lt;div class="highlight">
&lt;pre class="chroma">
&lt;code>
```markmap
- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```
&lt;/code>
&lt;/pre>
&lt;/div>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">- Mindmaps
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Links
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - [Hugo Blox Docs](https://docs.hugoblox.com/)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - [Discord Community](https://discord.gg/z8wNYzb)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Features
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Markdown formatting
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - **inline** ~~text~~ *styles*
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - multiline
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> text
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - `inline code`
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> -
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> ```js
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> console.log(&amp;#39;hello&amp;#39;);
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> console.log(&amp;#39;code block&amp;#39;);
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> ```
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="highlighting">Highlighting&lt;/h2>
&lt;p>&lt;mark>Highlight&lt;/mark> important text with &lt;code>mark&lt;/code>:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">mark&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>Highlighted text&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">mark&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="callouts">Callouts&lt;/h2>
&lt;p>Use &lt;a href="https://docs.hugoblox.com/reference/markdown/#callouts">callouts&lt;/a> (aka &lt;em>asides&lt;/em>, &lt;em>hints&lt;/em>, or &lt;em>alerts&lt;/em>) to draw attention to notes, tips, and warnings.&lt;/p>
&lt;p>By wrapping a paragraph in &lt;code>{{% callout note %}} ... {{% /callout %}}&lt;/code>, it will render as an aside.&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{% callout note %}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{% /callout %}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.&lt;/span>
&lt;/div>
&lt;p>Or use the &lt;code>warning&lt;/code> callout type so your readers don&amp;rsquo;t miss critical details:&lt;/p>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-yellow-100 dark:bg-yellow-900">
&lt;span class="pr-3 pt-1 text-red-400">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.&lt;/span>
&lt;/div>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>📈 Communicate your results effectively with the best data visualizations</title><link>https://junfei-z.github.io/post/data-visualization/</link><pubDate>Wed, 25 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/post/data-visualization/</guid><description>&lt;p>Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.&lt;/p>
&lt;p>Use popular tools such as Plotly, Mermaid, and data frames.&lt;/p>
&lt;h2 id="charts">Charts&lt;/h2>
&lt;p>Hugo Blox supports the popular &lt;a href="https://plot.ly/">Plotly&lt;/a> format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!&lt;/p>
&lt;p>Save your Plotly JSON in your page folder, for example &lt;code>line-chart.json&lt;/code>, and then add the &lt;code>{{&amp;lt; chart data=&amp;quot;line-chart&amp;quot; &amp;gt;}}&lt;/code> shortcode where you would like the chart to appear.&lt;/p>
&lt;p>Demo:&lt;/p>
&lt;div id="chart-819742536" class="chart">&lt;/div>
&lt;script>
async function fetchChartJSON() {
console.debug('Hugo Blox fetching chart JSON...')
const response = await fetch('.\/line-chart.json');
return await response.json();
}
(function() {
let a = setInterval( function() {
if ( typeof window.Plotly === 'undefined' ) {
console.debug('Plotly not loaded yet...')
return;
}
clearInterval( a );
fetchChartJSON().then(chart => {
console.debug('Plotting chart...')
window.Plotly.newPlot('chart-819742536', chart.data, chart.layout, {responsive: true});
});
}, 500 );
})();
&lt;/script>
&lt;p>You might also find the &lt;a href="http://plotly-json-editor.getforge.io/">Plotly JSON Editor&lt;/a> useful.&lt;/p>
&lt;h2 id="diagrams">Diagrams&lt;/h2>
&lt;p>Hugo Blox supports the &lt;em>Mermaid&lt;/em> Markdown extension for diagrams.&lt;/p>
&lt;p>An example &lt;strong>flowchart&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
graph TD
A[Hard] --&amp;gt;|Text| B(Round)
B --&amp;gt; C{Decision}
C --&amp;gt;|One| D[Result 1]
C --&amp;gt;|Two| E[Result 2]
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">graph TD
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">A[Hard] --&amp;gt;|Text| B(Round)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">B --&amp;gt; C{Decision}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">C --&amp;gt;|One| D[Result 1]
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">C --&amp;gt;|Two| E[Result 2]
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>An example &lt;strong>sequence diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
sequenceDiagram
Alice-&amp;gt;&amp;gt;John: Hello John, how are you?
loop Healthcheck
John-&amp;gt;&amp;gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John--&amp;gt;&amp;gt;Alice: Great!
John-&amp;gt;&amp;gt;Bob: How about you?
Bob--&amp;gt;&amp;gt;John: Jolly good!
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">sequenceDiagram
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Alice-&amp;gt;&amp;gt;John: Hello John, how are you?
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">loop Healthcheck
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> John-&amp;gt;&amp;gt;John: Fight against hypochondria
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">end
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Note right of John: Rational thoughts!
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">John--&amp;gt;&amp;gt;Alice: Great!
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">John-&amp;gt;&amp;gt;Bob: How about you?
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Bob--&amp;gt;&amp;gt;John: Jolly good!
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>An example &lt;strong>class diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
classDiagram
Class01 &amp;lt;|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --&amp;gt; C2 : Where am i?
Class09 --* C3
Class09 --|&amp;gt; Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 &amp;lt;--&amp;gt; C2: Cool label
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">classDiagram
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 &amp;lt;|-- AveryLongClass : Cool
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class03 *-- Class04
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class05 o-- Class06
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class07 .. Class08
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class09 --&amp;gt; C2 : Where am i?
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class09 --* C3
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class09 --|&amp;gt; Class07
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class07 : equals()
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class07 : Object[] elementData
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 : size()
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 : int chimp
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 : int gorilla
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class08 &amp;lt;--&amp;gt; C2: Cool label
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>An example &lt;strong>state diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
stateDiagram
[*] --&amp;gt; Still
Still --&amp;gt; [*]
Still --&amp;gt; Moving
Moving --&amp;gt; Still
Moving --&amp;gt; Crash
Crash --&amp;gt; [*]
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">stateDiagram
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">[*] --&amp;gt; Still
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Still --&amp;gt; [*]
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Still --&amp;gt; Moving
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Moving --&amp;gt; Still
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Moving --&amp;gt; Crash
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Crash --&amp;gt; [*]
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="data-frames">Data Frames&lt;/h2>
&lt;p>Save your spreadsheet as a CSV file in your page&amp;rsquo;s folder and then render it by adding the &lt;em>Table&lt;/em> shortcode to your page:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-go" data-lang="go">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{{&amp;lt;&lt;/span> &lt;span class="nx">table&lt;/span> &lt;span class="nx">path&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;results.csv&amp;#34;&lt;/span> &lt;span class="nx">header&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;true&amp;#34;&lt;/span> &lt;span class="nx">caption&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;Table 1: My results&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;}}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;table class="table-auto w-full">
&lt;thead>
&lt;tr> &lt;th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">customer_id&lt;/th> &lt;th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">score&lt;/th> &lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">1&lt;/td>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">2&lt;/td>
&lt;td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0.5&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">3&lt;/td>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">1&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;caption class="table-caption">Table 1: My results&lt;/caption>
&lt;/table>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>📈 Communicate your results effectively with the best data visualizations</title><link>https://junfei-z.github.io/zh/post/data-visualization/</link><pubDate>Wed, 25 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/post/data-visualization/</guid><description>&lt;p>Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.&lt;/p>
&lt;p>Use popular tools such as Plotly, Mermaid, and data frames.&lt;/p>
&lt;h2 id="charts">Charts&lt;/h2>
&lt;p>Hugo Blox supports the popular &lt;a href="https://plot.ly/">Plotly&lt;/a> format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!&lt;/p>
&lt;p>Save your Plotly JSON in your page folder, for example &lt;code>line-chart.json&lt;/code>, and then add the &lt;code>{{&amp;lt; chart data=&amp;quot;line-chart&amp;quot; &amp;gt;}}&lt;/code> shortcode where you would like the chart to appear.&lt;/p>
&lt;p>Demo:&lt;/p>
&lt;div id="chart-349567812" class="chart">&lt;/div>
&lt;script>
async function fetchChartJSON() {
console.debug('Hugo Blox fetching chart JSON...')
const response = await fetch('.\/line-chart.json');
return await response.json();
}
(function() {
let a = setInterval( function() {
if ( typeof window.Plotly === 'undefined' ) {
console.debug('Plotly not loaded yet...')
return;
}
clearInterval( a );
fetchChartJSON().then(chart => {
console.debug('Plotting chart...')
window.Plotly.newPlot('chart-349567812', chart.data, chart.layout, {responsive: true});
});
}, 500 );
})();
&lt;/script>
&lt;p>You might also find the &lt;a href="http://plotly-json-editor.getforge.io/">Plotly JSON Editor&lt;/a> useful.&lt;/p>
&lt;h2 id="diagrams">Diagrams&lt;/h2>
&lt;p>Hugo Blox supports the &lt;em>Mermaid&lt;/em> Markdown extension for diagrams.&lt;/p>
&lt;p>An example &lt;strong>flowchart&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
graph TD
A[Hard] --&amp;gt;|Text| B(Round)
B --&amp;gt; C{Decision}
C --&amp;gt;|One| D[Result 1]
C --&amp;gt;|Two| E[Result 2]
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">graph TD
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">A[Hard] --&amp;gt;|Text| B(Round)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">B --&amp;gt; C{Decision}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">C --&amp;gt;|One| D[Result 1]
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">C --&amp;gt;|Two| E[Result 2]
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>An example &lt;strong>sequence diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
sequenceDiagram
Alice-&amp;gt;&amp;gt;John: Hello John, how are you?
loop Healthcheck
John-&amp;gt;&amp;gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John--&amp;gt;&amp;gt;Alice: Great!
John-&amp;gt;&amp;gt;Bob: How about you?
Bob--&amp;gt;&amp;gt;John: Jolly good!
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">sequenceDiagram
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Alice-&amp;gt;&amp;gt;John: Hello John, how are you?
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">loop Healthcheck
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> John-&amp;gt;&amp;gt;John: Fight against hypochondria
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">end
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Note right of John: Rational thoughts!
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">John--&amp;gt;&amp;gt;Alice: Great!
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">John-&amp;gt;&amp;gt;Bob: How about you?
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Bob--&amp;gt;&amp;gt;John: Jolly good!
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>An example &lt;strong>class diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
classDiagram
Class01 &amp;lt;|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --&amp;gt; C2 : Where am i?
Class09 --* C3
Class09 --|&amp;gt; Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 &amp;lt;--&amp;gt; C2: Cool label
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">classDiagram
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 &amp;lt;|-- AveryLongClass : Cool
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class03 *-- Class04
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class05 o-- Class06
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class07 .. Class08
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class09 --&amp;gt; C2 : Where am i?
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class09 --* C3
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class09 --|&amp;gt; Class07
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class07 : equals()
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class07 : Object[] elementData
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 : size()
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 : int chimp
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 : int gorilla
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class08 &amp;lt;--&amp;gt; C2: Cool label
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>An example &lt;strong>state diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
stateDiagram
[*] --&amp;gt; Still
Still --&amp;gt; [*]
Still --&amp;gt; Moving
Moving --&amp;gt; Still
Moving --&amp;gt; Crash
Crash --&amp;gt; [*]
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">stateDiagram
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">[*] --&amp;gt; Still
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Still --&amp;gt; [*]
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Still --&amp;gt; Moving
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Moving --&amp;gt; Still
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Moving --&amp;gt; Crash
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Crash --&amp;gt; [*]
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="data-frames">Data Frames&lt;/h2>
&lt;p>Save your spreadsheet as a CSV file in your page&amp;rsquo;s folder and then render it by adding the &lt;em>Table&lt;/em> shortcode to your page:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-go" data-lang="go">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{{&amp;lt;&lt;/span> &lt;span class="nx">table&lt;/span> &lt;span class="nx">path&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;results.csv&amp;#34;&lt;/span> &lt;span class="nx">header&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;true&amp;#34;&lt;/span> &lt;span class="nx">caption&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;Table 1: My results&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;}}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;table class="table-auto w-full">
&lt;thead>
&lt;tr> &lt;th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">customer_id&lt;/th> &lt;th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">score&lt;/th> &lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">1&lt;/td>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">2&lt;/td>
&lt;td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0.5&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">3&lt;/td>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">1&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;caption class="table-caption">Table 1: My results&lt;/caption>
&lt;/table>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>👩🏼‍🏫 Teach academic courses</title><link>https://junfei-z.github.io/post/teach-courses/</link><pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/post/teach-courses/</guid><description>&lt;p>&lt;a href="https://hugoblox.com">Hugo Blox Builder&lt;/a> is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.&lt;/p>
&lt;p>&lt;strong>Embed videos, podcasts, code, LaTeX math, and even test students!&lt;/strong>&lt;/p>
&lt;p>On this page, you&amp;rsquo;ll find some examples of the types of technical content that can be rendered with Hugo Blox.&lt;/p>
&lt;h2 id="video">Video&lt;/h2>
&lt;p>Teach your course by sharing videos with your students. Choose from one of the following approaches:&lt;/p>
&lt;p>&lt;strong>Youtube&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; youtube D2vj0WcvH5c &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;p>&lt;strong>Bilibili&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; bilibili BV1WV4y1r7DF &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;div class="w-full h-auto aspect-video relative">
&lt;iframe src="//player.bilibili.com/player.html?bvid=BV1WV4y1r7DF&amp;page=1"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; fullscreen; picture-in-picture;"
class="w-full h-full"
>&lt;/iframe>
&lt;/div>
&lt;p>&lt;strong>Video file&lt;/strong>&lt;/p>
&lt;p>Videos may be added to a page by either placing them in your &lt;code>assets/media/&lt;/code> media library or in your &lt;a href="https://gohugo.io/content-management/page-bundles/">page&amp;rsquo;s folder&lt;/a>, and then embedding them with the &lt;em>video&lt;/em> shortcode:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; video src=&amp;quot;my_video.mp4&amp;quot; controls=&amp;quot;yes&amp;quot; &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;h2 id="podcast">Podcast&lt;/h2>
&lt;p>You can add a podcast or music to a page by placing the MP3 file in the page&amp;rsquo;s folder or the media library folder and then embedding the audio on your page with the &lt;em>audio&lt;/em> shortcode:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; audio src=&amp;quot;ambient-piano.mp3&amp;quot; &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;p>Try it out:&lt;/p>
&lt;audio controls >
&lt;source src="https://junfei-z.github.io/post/teach-courses/ambient-piano.mp3" type="audio/mpeg">
&lt;/audio>
&lt;h2 id="test-students">Test students&lt;/h2>
&lt;p>Provide a simple yet fun self-assessment by revealing the solutions to challenges with the &lt;code>spoiler&lt;/code> shortcode:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">spoiler&lt;/span> &lt;span class="na">text&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;👉 Click to view the solution&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">You found me!
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">spoiler&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;details class="spoiler " id="spoiler-3">
&lt;summary class="cursor-pointer">👉 Click to view the solution&lt;/summary>
&lt;div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2">
You found me 🎉
&lt;/div>
&lt;/details>
&lt;h2 id="math">Math&lt;/h2>
&lt;p>Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. Enable math by setting the &lt;code>math: true&lt;/code> option in your page&amp;rsquo;s front matter, or enable math for your entire site by toggling math in your &lt;code>config/_default/params.yaml&lt;/code> file:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">features&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">math&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>To render &lt;em>inline&lt;/em> or &lt;em>block&lt;/em> math, wrap your LaTeX math with &lt;code>$...$&lt;/code> or &lt;code>$$...$$&lt;/code>, respectively.&lt;/p>
&lt;p>Example &lt;strong>math block&lt;/strong>:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-latex" data-lang="latex">&lt;span class="line">&lt;span class="cl">&lt;span class="sb">$$&lt;/span>&lt;span class="nb">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">&lt;/span>&lt;span class="nv">\gamma&lt;/span>&lt;span class="nb">_{n} &lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\frac&lt;/span>&lt;span class="nb">{ &lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> | &lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n} &lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">} &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb">^T &lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">[&lt;/span>&lt;span class="nv">\nabla&lt;/span>&lt;span class="nb"> F &lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\nabla&lt;/span>&lt;span class="nb"> F &lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">]&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> |}{&lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\|\nabla&lt;/span>&lt;span class="nb"> F&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb">{x}_{n}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\nabla&lt;/span>&lt;span class="nb"> F&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb">{x}_{n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\|&lt;/span>&lt;span class="nb">^&lt;/span>&lt;span class="m">2&lt;/span>&lt;span class="nb">}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">&lt;/span>&lt;span class="s">$$&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$
&lt;p>Example &lt;strong>inline math&lt;/strong> &lt;code>$\nabla F(\mathbf{x}_{n})$&lt;/code> renders as $\nabla F(\mathbf{x}_{n})$.&lt;/p>
&lt;p>Example &lt;strong>multi-line math&lt;/strong> using the math linebreak (&lt;code>\\&lt;/code>):&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-latex" data-lang="latex">&lt;span class="line">&lt;span class="cl">&lt;span class="sb">$$&lt;/span>&lt;span class="nb">f&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nb">k;p_{&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">}^{&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\begin&lt;/span>&lt;span class="nb">{cases}p_{&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">}^{&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">} &amp;amp; &lt;/span>&lt;span class="nv">\text&lt;/span>&lt;span class="nb">{if }k&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">, &lt;/span>&lt;span class="nv">\\&lt;/span>&lt;span class="nb">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">p_{&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">}^{&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">} &amp;amp; &lt;/span>&lt;span class="nv">\text&lt;/span>&lt;span class="nb">{if }k&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">.&lt;/span>&lt;span class="nv">\end&lt;/span>&lt;span class="nb">{cases}&lt;/span>&lt;span class="s">$$&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
$$
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}
$$
&lt;h2 id="code">Code&lt;/h2>
&lt;p>Hugo Blox Builder utilises Hugo&amp;rsquo;s Markdown extension for highlighting code syntax. The code theme can be selected in the &lt;code>config/_default/params.yaml&lt;/code> file.&lt;/p>
&lt;pre>&lt;code>```python
import pandas as pd
data = pd.read_csv(&amp;quot;data.csv&amp;quot;)
data.head()
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">pandas&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="nn">pd&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">read_csv&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;data.csv&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">head&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="inline-images">Inline Images&lt;/h2>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-go" data-lang="go">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{{&amp;lt;&lt;/span> &lt;span class="nx">icon&lt;/span> &lt;span class="nx">name&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;python&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;}}&lt;/span> &lt;span class="nx">Python&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;p>
&lt;span class="inline-block pr-1">
&lt;svg style="height: 1em; transform: translateY(0.1em);" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentColor">&lt;path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/>&lt;/svg>
&lt;/span> Python&lt;/p>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>👩🏼‍🏫 Teach academic courses</title><link>https://junfei-z.github.io/zh/post/teach-courses/</link><pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/post/teach-courses/</guid><description>&lt;p>&lt;a href="https://hugoblox.com">Hugo Blox Builder&lt;/a> is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.&lt;/p>
&lt;p>&lt;strong>Embed videos, podcasts, code, LaTeX math, and even test students!&lt;/strong>&lt;/p>
&lt;p>On this page, you&amp;rsquo;ll find some examples of the types of technical content that can be rendered with Hugo Blox.&lt;/p>
&lt;h2 id="video">Video&lt;/h2>
&lt;p>Teach your course by sharing videos with your students. Choose from one of the following approaches:&lt;/p>
&lt;p>&lt;strong>Youtube&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; youtube D2vj0WcvH5c &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;p>&lt;strong>Bilibili&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; bilibili BV1WV4y1r7DF &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;div class="w-full h-auto aspect-video relative">
&lt;iframe src="//player.bilibili.com/player.html?bvid=BV1WV4y1r7DF&amp;page=1"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; fullscreen; picture-in-picture;"
class="w-full h-full"
>&lt;/iframe>
&lt;/div>
&lt;p>&lt;strong>Video file&lt;/strong>&lt;/p>
&lt;p>Videos may be added to a page by either placing them in your &lt;code>assets/media/&lt;/code> media library or in your &lt;a href="https://gohugo.io/content-management/page-bundles/">page&amp;rsquo;s folder&lt;/a>, and then embedding them with the &lt;em>video&lt;/em> shortcode:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; video src=&amp;quot;my_video.mp4&amp;quot; controls=&amp;quot;yes&amp;quot; &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;h2 id="podcast">Podcast&lt;/h2>
&lt;p>You can add a podcast or music to a page by placing the MP3 file in the page&amp;rsquo;s folder or the media library folder and then embedding the audio on your page with the &lt;em>audio&lt;/em> shortcode:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; audio src=&amp;quot;ambient-piano.mp3&amp;quot; &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;p>Try it out:&lt;/p>
&lt;audio controls >
&lt;source src="https://junfei-z.github.io/zh/post/teach-courses/ambient-piano.mp3" type="audio/mpeg">
&lt;/audio>
&lt;h2 id="test-students">Test students&lt;/h2>
&lt;p>Provide a simple yet fun self-assessment by revealing the solutions to challenges with the &lt;code>spoiler&lt;/code> shortcode:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">spoiler&lt;/span> &lt;span class="na">text&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;👉 Click to view the solution&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">You found me!
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">spoiler&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;details class="spoiler " id="spoiler-3">
&lt;summary class="cursor-pointer">👉 Click to view the solution&lt;/summary>
&lt;div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2">
You found me 🎉
&lt;/div>
&lt;/details>
&lt;h2 id="math">Math&lt;/h2>
&lt;p>Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. Enable math by setting the &lt;code>math: true&lt;/code> option in your page&amp;rsquo;s front matter, or enable math for your entire site by toggling math in your &lt;code>config/_default/params.yaml&lt;/code> file:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">features&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">math&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>To render &lt;em>inline&lt;/em> or &lt;em>block&lt;/em> math, wrap your LaTeX math with &lt;code>$...$&lt;/code> or &lt;code>$$...$$&lt;/code>, respectively.&lt;/p>
&lt;p>Example &lt;strong>math block&lt;/strong>:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-latex" data-lang="latex">&lt;span class="line">&lt;span class="cl">&lt;span class="sb">$$&lt;/span>&lt;span class="nb">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">&lt;/span>&lt;span class="nv">\gamma&lt;/span>&lt;span class="nb">_{n} &lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\frac&lt;/span>&lt;span class="nb">{ &lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> | &lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n} &lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">} &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb">^T &lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">[&lt;/span>&lt;span class="nv">\nabla&lt;/span>&lt;span class="nb"> F &lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\nabla&lt;/span>&lt;span class="nb"> F &lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">]&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> |}{&lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\|\nabla&lt;/span>&lt;span class="nb"> F&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb">{x}_{n}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\nabla&lt;/span>&lt;span class="nb"> F&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb">{x}_{n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\|&lt;/span>&lt;span class="nb">^&lt;/span>&lt;span class="m">2&lt;/span>&lt;span class="nb">}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">&lt;/span>&lt;span class="s">$$&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$
&lt;p>Example &lt;strong>inline math&lt;/strong> &lt;code>$\nabla F(\mathbf{x}_{n})$&lt;/code> renders as $\nabla F(\mathbf{x}_{n})$.&lt;/p>
&lt;p>Example &lt;strong>multi-line math&lt;/strong> using the math linebreak (&lt;code>\\&lt;/code>):&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-latex" data-lang="latex">&lt;span class="line">&lt;span class="cl">&lt;span class="sb">$$&lt;/span>&lt;span class="nb">f&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nb">k;p_{&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">}^{&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\begin&lt;/span>&lt;span class="nb">{cases}p_{&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">}^{&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">} &amp;amp; &lt;/span>&lt;span class="nv">\text&lt;/span>&lt;span class="nb">{if }k&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">, &lt;/span>&lt;span class="nv">\\&lt;/span>&lt;span class="nb">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">p_{&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">}^{&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">} &amp;amp; &lt;/span>&lt;span class="nv">\text&lt;/span>&lt;span class="nb">{if }k&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">.&lt;/span>&lt;span class="nv">\end&lt;/span>&lt;span class="nb">{cases}&lt;/span>&lt;span class="s">$$&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
$$
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}
$$
&lt;h2 id="code">Code&lt;/h2>
&lt;p>Hugo Blox Builder utilises Hugo&amp;rsquo;s Markdown extension for highlighting code syntax. The code theme can be selected in the &lt;code>config/_default/params.yaml&lt;/code> file.&lt;/p>
&lt;pre>&lt;code>```python
import pandas as pd
data = pd.read_csv(&amp;quot;data.csv&amp;quot;)
data.head()
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">pandas&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="nn">pd&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">read_csv&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;data.csv&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">head&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="inline-images">Inline Images&lt;/h2>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-go" data-lang="go">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{{&amp;lt;&lt;/span> &lt;span class="nx">icon&lt;/span> &lt;span class="nx">name&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;python&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;}}&lt;/span> &lt;span class="nx">Python&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;p>
&lt;span class="inline-block pr-1">
&lt;svg style="height: 1em; transform: translateY(0.1em);" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentColor">&lt;path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/>&lt;/svg>
&lt;/span> Python&lt;/p>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>Experience</title><link>https://junfei-z.github.io/experience/</link><pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/experience/</guid><description/></item><item><title>经历</title><link>https://junfei-z.github.io/zh/experience/</link><pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/experience/</guid><description/></item><item><title>✅ Manage your projects</title><link>https://junfei-z.github.io/post/project-management/</link><pubDate>Mon, 23 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/post/project-management/</guid><description>&lt;p>Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!&lt;/p>
&lt;h2 id="ideation">Ideation&lt;/h2>
&lt;p>Hugo Blox supports a Markdown extension for mindmaps.&lt;/p>
&lt;p>Simply insert a Markdown code block labelled as &lt;code>markmap&lt;/code> and optionally set the height of the mindmap as shown in the example below.&lt;/p>
&lt;p>Mindmaps can be created by simply writing the items as a Markdown list within the &lt;code>markmap&lt;/code> code block, indenting each item to create as many sub-levels as you need:&lt;/p>
&lt;div class="highlight">
&lt;pre class="chroma">
&lt;code>
```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```
&lt;/code>
&lt;/pre>
&lt;/div>
&lt;p>renders as&lt;/p>
&lt;div class="markmap" style="height: 200px;">
&lt;pre>- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal&lt;/pre>
&lt;/div>
&lt;h2 id="diagrams">Diagrams&lt;/h2>
&lt;p>Hugo Blox supports the &lt;em>Mermaid&lt;/em> Markdown extension for diagrams.&lt;/p>
&lt;p>An example &lt;strong>Gantt diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="mermaid">gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
&lt;/div>
&lt;h2 id="todo-lists">Todo lists&lt;/h2>
&lt;p>You can even write your todo lists in Markdown too:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">&lt;span class="k">- [x]&lt;/span> Write math example
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">- [x]&lt;/span> Write diagram example
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">- [ ]&lt;/span> Do something else
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;ul>
&lt;li>&lt;input checked="" disabled="" type="checkbox"> Write math example
&lt;ul>
&lt;li>&lt;input checked="" disabled="" type="checkbox"> Write diagram example&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;input disabled="" type="checkbox"> Do something else&lt;/li>
&lt;/ul>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>✅ Manage your projects</title><link>https://junfei-z.github.io/zh/post/project-management/</link><pubDate>Mon, 23 Oct 2023 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/post/project-management/</guid><description>&lt;p>Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!&lt;/p>
&lt;h2 id="ideation">Ideation&lt;/h2>
&lt;p>Hugo Blox supports a Markdown extension for mindmaps.&lt;/p>
&lt;p>Simply insert a Markdown code block labelled as &lt;code>markmap&lt;/code> and optionally set the height of the mindmap as shown in the example below.&lt;/p>
&lt;p>Mindmaps can be created by simply writing the items as a Markdown list within the &lt;code>markmap&lt;/code> code block, indenting each item to create as many sub-levels as you need:&lt;/p>
&lt;div class="highlight">
&lt;pre class="chroma">
&lt;code>
```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```
&lt;/code>
&lt;/pre>
&lt;/div>
&lt;p>renders as&lt;/p>
&lt;div class="markmap" style="height: 200px;">
&lt;pre>- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal&lt;/pre>
&lt;/div>
&lt;h2 id="diagrams">Diagrams&lt;/h2>
&lt;p>Hugo Blox supports the &lt;em>Mermaid&lt;/em> Markdown extension for diagrams.&lt;/p>
&lt;p>An example &lt;strong>Gantt diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="mermaid">gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
&lt;/div>
&lt;h2 id="todo-lists">Todo lists&lt;/h2>
&lt;p>You can even write your todo lists in Markdown too:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">&lt;span class="k">- [x]&lt;/span> Write math example
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">- [x]&lt;/span> Write diagram example
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">- [ ]&lt;/span> Do something else
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;ul>
&lt;li>&lt;input checked="" disabled="" type="checkbox"> Write math example
&lt;ul>
&lt;li>&lt;input checked="" disabled="" type="checkbox"> Write diagram example&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;input disabled="" type="checkbox"> Do something else&lt;/li>
&lt;/ul>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>An example preprint / working paper</title><link>https://junfei-z.github.io/publication/preprint/</link><pubDate>Sun, 07 Apr 2019 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/publication/preprint/</guid><description>&lt;p>This work is driven by the results in my &lt;a href="https://junfei-z.github.io/publication/conference-paper/">previous paper&lt;/a> on LLMs.&lt;/p>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Create your slides in Markdown - click the &lt;em>Slides&lt;/em> button to check out the example.&lt;/span>
&lt;/div>
&lt;p>Add the publication&amp;rsquo;s &lt;strong>full text&lt;/strong> or &lt;strong>supplementary notes&lt;/strong> here. You can use rich formatting such as including &lt;a href="https://docs.hugoblox.com/content/writing-markdown-latex/">code, math, and images&lt;/a>.&lt;/p></description></item><item><title>An example preprint / working paper</title><link>https://junfei-z.github.io/zh/publication/preprint/</link><pubDate>Sun, 07 Apr 2019 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/publication/preprint/</guid><description>&lt;p>This work is driven by the results in my &lt;a href="https://junfei-z.github.io/publication/conference-paper/">previous paper&lt;/a> on LLMs.&lt;/p>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Create your slides in Markdown - click the &lt;em>Slides&lt;/em> button to check out the example.&lt;/span>
&lt;/div>
&lt;p>Add the publication&amp;rsquo;s &lt;strong>full text&lt;/strong> or &lt;strong>supplementary notes&lt;/strong> here. You can use rich formatting such as including &lt;a href="https://docs.hugoblox.com/content/writing-markdown-latex/">code, math, and images&lt;/a>.&lt;/p></description></item><item><title>An example journal article</title><link>https://junfei-z.github.io/publication/journal-article/</link><pubDate>Tue, 01 Sep 2015 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/publication/journal-article/</guid><description>&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Click the &lt;em>Cite&lt;/em> button above to demo the feature to enable visitors to import publication metadata into their reference management software.&lt;/span>
&lt;/div>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Create your slides in Markdown - click the &lt;em>Slides&lt;/em> button to check out the example.&lt;/span>
&lt;/div>
&lt;p>Add the publication&amp;rsquo;s &lt;strong>full text&lt;/strong> or &lt;strong>supplementary notes&lt;/strong> here. You can use rich formatting such as including &lt;a href="https://docs.hugoblox.com/content/writing-markdown-latex/">code, math, and images&lt;/a>.&lt;/p></description></item><item><title>An example journal article</title><link>https://junfei-z.github.io/zh/publication/journal-article/</link><pubDate>Tue, 01 Sep 2015 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/publication/journal-article/</guid><description>&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Click the &lt;em>Cite&lt;/em> button above to demo the feature to enable visitors to import publication metadata into their reference management software.&lt;/span>
&lt;/div>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Create your slides in Markdown - click the &lt;em>Slides&lt;/em> button to check out the example.&lt;/span>
&lt;/div>
&lt;p>Add the publication&amp;rsquo;s &lt;strong>full text&lt;/strong> or &lt;strong>supplementary notes&lt;/strong> here. You can use rich formatting such as including &lt;a href="https://docs.hugoblox.com/content/writing-markdown-latex/">code, math, and images&lt;/a>.&lt;/p></description></item><item><title>An example conference paper</title><link>https://junfei-z.github.io/publication/conference-paper/</link><pubDate>Mon, 01 Jul 2013 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/publication/conference-paper/</guid><description>&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Click the &lt;em>Cite&lt;/em> button above to demo the feature to enable visitors to import publication metadata into their reference management software.&lt;/span>
&lt;/div>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Create your slides in Markdown - click the &lt;em>Slides&lt;/em> button to check out the example.&lt;/span>
&lt;/div>
&lt;p>Add the publication&amp;rsquo;s &lt;strong>full text&lt;/strong> or &lt;strong>supplementary notes&lt;/strong> here. You can use rich formatting such as including &lt;a href="https://docs.hugoblox.com/content/writing-markdown-latex/">code, math, and images&lt;/a>.&lt;/p></description></item><item><title>An example conference paper</title><link>https://junfei-z.github.io/zh/publication/conference-paper/</link><pubDate>Mon, 01 Jul 2013 00:00:00 +0000</pubDate><guid>https://junfei-z.github.io/zh/publication/conference-paper/</guid><description>&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Click the &lt;em>Cite&lt;/em> button above to demo the feature to enable visitors to import publication metadata into their reference management software.&lt;/span>
&lt;/div>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Create your slides in Markdown - click the &lt;em>Slides&lt;/em> button to check out the example.&lt;/span>
&lt;/div>
&lt;p>Add the publication&amp;rsquo;s &lt;strong>full text&lt;/strong> or &lt;strong>supplementary notes&lt;/strong> here. You can use rich formatting such as including &lt;a href="https://docs.hugoblox.com/content/writing-markdown-latex/">code, math, and images&lt;/a>.&lt;/p></description></item></channel></rss>