Merge pull request #95 from sitcon-tw:feature/poster-page

Feature/poster-page

Author: dada878

app/(website)/(pages)/events/page.tsx

@@ -68,6 +68,23 @@ export default function Page() {
         <EventSection id="lightning_talk" title="閃電講">
           有自己的精彩內容想和大家分享，卻來不及投稿嗎？那麼，歡迎參加 SITCON
           2025
+          閃電講！閃電講將提供八位手腳最快的會眾五分鐘的時間與與會者們暢所欲言的分享你的專案或想法！
+          <br />
+          <br />
+          在年會當天上午 10:00 開始至下午
+          15:30，歡迎前往白板區的指定白板投稿參與。投稿的方式十分簡單！一但開放投稿，你就可以到白板區選擇一個空的順位，然後在白板上寫下你的演講標題和投稿者的名字（例如：「我在
+          SITCON 2025 的趣事分享 by
+          OsGa」），但名額只有八個，且每人限投一次，要搶要快！完成投稿後，請掃描白板區旁的表單，補充更多投稿資訊，例如標題、投稿者名稱及主題大綱。建議你可以事先準備好這些內容，以確保過程順利！
+          <br />
+          <br />
+          若你成功成為講者，請於下午 16:40 準時到 R0 3F
+          的右側集合，並攜帶你的演講設備，屆時會有議程組的夥伴在現場協助。同時，為了保持活動的多樣性和趣味性，因此我們不接受過於商業化的投稿。若你的演講內容超時，若商業內容超過十秒，畫面將會被直接切斷！
+          <br />
+          <br />
+          邀請你透過這場腎上腺素爆發的活動，讓你在 SITCON
+          年會上與更多人交流與分享！
+          {/* 有自己的精彩內容想和大家分享，卻來不及投稿嗎？那麼，歡迎參加 SITCON
+          2025
           閃電講！閃電講將提供八位手腳最快的會眾五分鐘的時間與與會者們暢所欲言的分享你的專案或想法！{" "}
           <br />
           <br />
@@ -81,7 +98,7 @@ export default function Page() {
           的右側集合，並攜帶你的演講設備，屆時會有議程組的夥伴在現場協助。每位講者的演講時間限制為五分鐘，我們將取八位投稿者上台分享，因此順位採取先搶先贏的方式，並且每人僅限投稿一次。我們希望保持活動的多樣性和趣味性，因此不接受過於商業化的投稿，若商業內容超過十秒，畫面將會被直接切斷。
           <br />
           <br />
-          邀請你透過這個難得的機會，讓你在 SITCON 年會上與更多人交流與分享！
+          邀請你透過這個難得的機會，讓你在 SITCON 年會上與更多人交流與分享！ */}
         </EventSection>
 
         <EventSection id="whiteboard" title="白板大戰">

app/(website)/(pages)/poster/page.tsx

@@ -1,33 +1,104 @@
 "use client";
 
-import { Pickaxe } from "lucide-react";
-import { motion } from "framer-motion";
+import { useState } from "react";
+import Image from "next/image";
+import { AnimatePresence, motion } from "framer-motion";
+import posterData from "./posterData";
+import { cn } from "@/lib/utils";
+
+interface Poster {
+  title: string;
+  author: string;
+  image: string;
+  description: string;
+}
 
 export default function PosterPage() {
+  const [selectedPoster, setSelectedPoster] = useState<Poster | null>(null);
+
+  const handlePosterClick = (poster: Poster) => {
+    // TODO: uncomment this line to enable dialog
+    // setSelectedPoster(poster);
+    console.log(poster.title);
+  };
+
+  const handleCloseDialog = () => {
+    setSelectedPoster(null);
+  };
+
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-6">
-      <motion.div
-        initial={{ rotate: 0 }}
-        animate={{ rotate: [0, 22, 0], x: [-20, -10, -20], y: [0, -10, 0] }}
-        transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
-        className="origin-bottom-left"
-      >
-        <Pickaxe className="size-36" strokeWidth={1.3} />
-      </motion.div>
-      <motion.p
-        initial={{ x: 0, y: 0 }}
-        animate={{
-          scale: [1, 1, 1.1, 1, 1],
-        }}
-        transition={{
-          duration: 1.5,
-          repeat: Infinity,
-          ease: "easeInOut",
-        }}
-        className="text-xl"
-      >
-        此頁面正在建置中...
-      </motion.p>
+    <div>
+      <h1 className="pb-16 text-h1 font-bold text-[#FFFFFF]">靜態海報展</h1>
+      <p className="mb-6">
+        繼去年成功的嘗試後，今年的「靜態海報展」將再次精彩登場！這是一個議程之外的特別展區，不僅提供學生展示專案或研究成果的舞台，還讓與會者能輕鬆探索多元領域的知識，開啟更多交流與啟發的契機。
+        <br />
+        <br />
+        活動將於 <strong>2025 年 3 月 8 日年會當天 在 4 樓北側攤位</strong>
+        展出，呈現來自全台優秀學生的海報作品。無論你是關注技術創新、專案分享，還是新穎的研究發現，都可以在這裡找到讓你耳目一新的主題。
+        <br />
+        <br />
+        今年的靜態海報展涵蓋了以下精彩內容：
+      </p>
+      <div className="grid grid-cols-1 justify-center gap-4 gap-y-12 md:grid-cols-2 lg:grid-cols-3">
+        {posterData.map((poster: Poster) => (
+          <div
+            key={poster.title}
+            className="cursor-pointer overflow-hidden rounded-md transition-all duration-300 hover:scale-105 hover:rounded-xl"
+            onClick={() => handlePosterClick(poster)}
+          >
+            <div className="group relative flex justify-center">
+              <Image
+                src={`/poster/${poster.image}`}
+                alt={poster.title}
+                width={400}
+                height={10}
+                className="rounded-xl blur-sm transition-all group-hover:opacity-40"
+              />
+              <p
+                className={cn(
+                  "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-nowrap text-lg font-bold text-[#fff] opacity-0 transition-all group-hover:scale-150 group-hover:opacity-100",
+                )}
+              >
+                展場解鎖完整海報
+              </p>
+            </div>
+
+            <h3 className="truncate pt-4 text-xl text-[#FFFFFF]">
+              {poster.title}
+            </h3>
+            <div className="flex items-center space-x-2 pt-2">
+              <p className="text-zinc-300">{poster.author}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+      <p className="mt-6">
+        此外，在下午的點心時段，各海報的作者親臨現場，與大家交流討論。這是個絕佳的機會來提問、學習，並認識來自各地的厲害夥伴們，熱愛探索新知的你，千萬別錯過！
+      </p>
+      <AnimatePresence>
+        {selectedPoster && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <div
+              className="absolute inset-0 bg-black bg-opacity-50"
+              onClick={handleCloseDialog}
+            />
+
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.8 }}
+              className="relative z-10 max-h-[50vh] w-full max-w-lg overflow-x-hidden overflow-y-scroll whitespace-pre-wrap rounded-lg bg-background p-12"
+            >
+              <h2 className="mb-4 text-2xl font-bold">
+                {selectedPoster.title}
+              </h2>
+              <p className="mb-4 whitespace-pre-line">
+                {selectedPoster.description}
+              </p>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }

app/(website)/(pages)/poster/posterData.ts

@@ -0,0 +1,59 @@
+export default [
+  {
+    title: "你會投籃嗎？",
+    author: "A1u",
+    authorDescription: "目前就讀成功高中二年級。",
+    description:
+      "由於我投不到三分球，我開始錄影看自己的動作有什麼問題，可是看了看還是沒有想法，所以決定來用mediapipe偵測自己的投籃，把畫面上的投籃「量化」成關節角度變成圖表，使分析變的簡單。接著再用tensorflow實現二元分類，辨識one motion(發力連貫、投的遠) 及 two motion(先跳再投、出手點高)。我瞭解到自己投籃必須傾向one motion，最後讓我能成功輕鬆的投三分球！",
+    image: "1.jpg",
+  },
+  {
+    title:
+      "Prediction of Molecular Structure Language and Melting/Boiling Point Properties",
+    author: "Wu, Tai-Cheng",
+    authorDescription:
+      "Wu, Tai-Cheng is a student in The affiliated senior high school of National Taiwan Normal University. TC is specialized in computer science and have publish some research related to this in science fair. Moreover, TC is the 30th club leader of Campus Network Management Club. ",
+    description: `Background:
+Predicting molecular properties such as solubility, toxicity, melting, and boiling points is crucial for fundamental science research. However, experimental measurements are often time-consuming and cost-intensive, so we use machine learning (ML) as an approach to improve prediction accuracy.
+
+Methods:
+A dataset containing over 10k compounds was used for training shallow and deep ML models. Shallow machine learning models were implemented via PyCaret and Mordred as feature extraction. For deep machine learning models, graph neural networks (GNNs), specifically CMPNN(Communicative Message Passing Neural Network) and GCN(Graph Convolutional Network), were trained, and tuned by adjusting the number of hidden layers and sizes (neurons) in each layer.
+
+Results:
+The CMPNN model outperforms the GCN and shallow ML model for boiling point prediction(best: R² = 0.76, MAE = 23.89K for b.p.; best: R² = 0.87; MAE = 23.73K for m.p.). The top molecular descriptor of the b.p. prediction is piPC1, which is related to bond order, and that of m.p. is AATS0d, which is related to σ electron Moreau-Broto autocorrelation. 
+
+Conclusions:
+The prediction of molecular properties was improved by a comprehensive research of shallow and deep learning approaches, showcasing CMPNN model can reach the highest performance in the prediction of m.p. and b.p.(R² = 0.87 in m.p.; R² = 0.76 in b.p.). In this study, we found that the deep learning model works better than shallow ML in predicting m.p.(p<0.05). This study uses SHAP analysis to successfully identify piPC1 and AATS0d as the key prediction factors of b.p. and m.p. respectively. Moreover, this approach can be applied to predict other molecular properties. To conclude, this study not only shows a highly accurate model but also identifies the key factors of m.p. and b.p.`,
+    image: "2.jpg",
+  },
+  {
+    title:
+      "創新醫療資訊展示系統：完美結合Raspberry Pi 4、電子紙及無線動態更新技術於一體",
+    author: "Amy",
+    authorDescription: `目前就讀資工系大四，專長是嵌入式系統和人工智慧，未來想往數位IC設計發展，目前正朝著這個目標努力前進。`,
+    description:
+      "隨著智慧醫療的發展，設計高效、低功耗且易管理的資訊展示系統成為醫院管理的重要挑戰。本研究提出一套結合Raspberry Pi 4、電子紙顯示技術與無線動態更新技術的創新醫療資訊展示系統，實現智慧化管理的同時，具備顯著的醫療應用價值。系統架構包含電子紙顯示器、Raspberry Pi 4以及基於網頁的管理平台，醫護人員可以透過網頁更新床頭卡與手術狀態，後端使用Python與Flask框架，顯示內容以Pillow函式庫生成與渲染，確保穩定性與可靠性。測試結果顯示，該系統能準確更新與展示醫療資訊，並有效減少紙張與能源消耗，符合ESG永續發展目標，特別是電子紙的低功耗特性，不僅實現醫療資訊管理智慧化，更降低對環境的影響，展現強大的應用潛力。此系統在病房資訊管理等場景中的穩定性與可靠性，為智慧醫療產業的推動提供了創新解決方案，並為未來醫療資訊系統的設計與發展開創了新方向。",
+    image: "3.jpg",
+  },
+  {
+    title:
+      "Enhanced Real-World Video Question-Answering :A Selective-Based Approach",
+    author: "恩恩",
+    authorDescription: `As a mathematics student with a strong passion for artificial intelligence, I enjoy leveraging my mathematical knowledge to solve real‐world computer vision tasks through AI integration. For example, I have recently developed a real‐time automatic system for tracking and analyzing basketball matches using computer vision, deep learning models, and various mathematical techniques. As hobbies, I have served as the team leader in three AI Cup competitions, each with commendable results.`,
+    description: `In this poster, we address video question-answering (VQA) challenges within the STAR dataset [1]. We present a modified version of the Flipped VQA 7B model [2], enhancing it by implementing a trainable frame selector and utilizing Llama-adapter [3] for fine-tuning. Also, we conduct an in-depth analysis of failed predictions and fine-tune hyper-parameters for improved accuracy.
+  
+  - [1] Bo Wu, et el. STAR: A Benchmark for Situated Reasoning in Real-World Videos. In NeurIPS 2021.
+  - [2] Dohwan Ko, et el. Large Language Models are Temporal and Causal Reasoners for Video Question Answering. In EMNLP 2023.
+  - [3] R Zhang, et al. LLaMA-Adapter: Efficient Fine-tuning of Language Models with Zero-init Attention. arXiv:2303.16199, 2023.`,
+    image: "5.jpg",
+  },
+  {
+    title: "打造專有領域的 RAG 系統 ─ 以玉山金融挑戰賽為例",
+    author: "鱸魚",
+    authorDescription: `我是鱸魚，一位擅長自然語言處理和數據科學的高中生，主要的研究領域是 LLM 和 Agent。我曾在發表過三篇 NLP 領域的論文，並在教育部的 AICUP 競賽上獲得第二、第三名的成績，在ML 領域累積了相當多的能力和經驗。目前已透過特殊選材，錄取了陽明交大的百川學士學位學程，即將修讀人工智慧─生醫核心。`,
+    description: `"儘管大型語言模型(LLM)在通用任務上表現優異，但在處理專業領域和私有數據的問答場景時，LLM 需要仰賴外部數據作為生成回答的基礎。為了讓 LLM 能有效運用外部數據進行回答，檢索增強生成(Retrieval-Augmented Generation, RAG)技術應運而生。
+
+本次議程將以講者在玉山銀行與教育部合辦的「AI CUP 2024 玉山人工智慧公開挑戰賽－RAG與LLM在金融問答的應用」中獲得第三名的參賽經驗為基礎，深入分享如何建構精準的金融領域 RAG 系統。內容涵蓋從文檔前處理、Chunking 策略優化、Text Embdeding 與 Reranking，以及 Prompt Engineering 等關鍵環節的實作細節，並剖析各個步驟對回答精準度的影響。與會者除了能掌握 RAG 的基本原理外，更能汲取實務經驗與技巧，為建置專屬又精確的中文 RAG 系統奠定基礎。"`,
+    image: "4.jpg",
+  },
+];

package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lintfix": "next lint --fix",
     "prepare": "husky"
   },
   "dependencies": {