美國手語(ASL)辨識系統

利用深度學習實現即時手語翻譯

ASL 專案示意圖

專案簡介

此專案利用 TensorFlow 深度學習框架，建立一個能夠透過攝影機即時辨識美國手語的模型。系統可以捕捉手部動作，並將其翻譯成對應的英文字母，旨在探索輔助溝通技術的可能性。

技術棧

Python TensorFlow OpenCV Keras Computer Vision

挑戰與學習

開發過程中最大的挑戰在於處理不同光照條件和複雜背景對手部偵測的干擾。我透過資料增強 (Data Augmentation) 的技術，產生了多樣化的訓練樣本，顯著提升了模型的穩定性與準確率。這次經驗讓我深刻體會到資料品質對於機器學習模型成敗的關鍵性。

查看原始碼
```你可以複製 `project-asl.html` 來建立 `project-finance.html`，然後修改其中的內容即可。 --- ### 4. CSS 程式碼 將以下所有程式碼貼到 `css/style.css`。 ```css /* --- 全域設定 --- */ :root { --primary-color: #4fd1c5; --background-color: #1a202c; --card-background: #2d3748; --text-color: #f7fafc; --text-muted: #a0aec0; --heading-font: 'Montserrat', sans-serif; --body-font: 'Noto Sans TC', sans-serif; --border-color: #4a5568; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body-font); color: var(--text-color); background-color: var(--background-color); line-height: 1.8; } .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .text-center { text-align: center; } /* --- 導覽列 --- */ .navbar { background-color: rgba(26, 32, 44, 0.85); padding: 1rem 0; position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--heading-font); font-size: 1.5rem; color: var(--text-color); text-decoration: none; font-weight: 700; } .navbar nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2.5rem; } .navbar nav ul li a { color: var(--text-muted); font-weight: 700; text-decoration: none; position: relative; padding: 0.5rem 0; transition: color 0.3s ease; } .navbar nav ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s ease; } .navbar nav ul li a:hover, .navbar nav ul li a.active { color: var(--text-color); } .navbar nav ul li a:hover::after, .navbar nav ul li a.active::after { width: 100%; } /* --- 頁面轉場動畫 --- */ .page-transition { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } body.fade-out .page-transition { opacity: 0; transition: opacity 0.4s ease-out; } /* --- 首頁 Hero --- */ .hero-section { min-height: calc(100vh - 82px); display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(26, 32, 44, 0.9), rgba(26, 32, 44, 0.9)), url('../images/hero-background.jpg') center center / cover no-repeat; } .hero-content h1 { font-family: var(--heading-font); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--text-color); margin: 0 0 1rem; animation: fadeInDown 1s ease-out; } .hero-content p { font-size: 1.25rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 2.5rem; animation: fadeInUp 1s ease-out 0.3s backwards; } .cta-button { display: inline-block; background-color: var(--primary-color); color: var(--background-color); padding: 0.8rem 2.5rem; border-radius: 50px; font-size: 1.1rem; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s ease; animation: fadeInUp 1s ease-out 0.6s backwards; } .cta-button:hover { background-color: #fff; transform: translateY(-3px); box-shadow: 0 4px 15px rgba(79, 209, 197, 0.4); } /* --- 通用頁面區塊 --- */ .page-section { padding: 5rem 0; } .page-section h2 { text-align: center; font-size: 2.5rem; color: var(--primary-color); margin-bottom: 3rem; position: relative; } .page-section h2::after { content: ''; display: block; width: 60px; height: 4px; background: var(--primary-color); margin: 0.75rem auto 0; } /* --- 關於我頁面 --- */ .about-content { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: center; margin-bottom: 4rem; } .about-avatar { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; margin: 0 auto; border: 4px solid var(--primary-color); } .about-avatar img { width: 100%; height: 100%; object-fit: cover; } .about-text h3 { font-size: 1.8rem; color: var(--text-color); } .skills-section h3 { text-align: center; font-size: 1.8rem; color: var(--primary-color); margin-bottom: 2rem; } .skills-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .skills-list span { background-color: var(--card-background); padding: 0.5rem 1rem; border-radius: 5px; font-weight: bold; } /* --- 專案列表頁面 --- */ .project-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .project-card { background-color: var(--card-background); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .project-image { height: 200px; background-size: cover; background-position: center; } .project-card-content { padding: 1.5rem; text-align: left; } .project-card-content h3 { margin: 0 0 0.5rem; color: var(--text-color); } .project-card-content p { color: var(--text-muted); margin-bottom: 1.5rem; } .project-link { color: var(--primary-color); text-decoration: none; font-weight: bold; } /* --- 專案詳細頁 --- */ .project-detail-section { padding-top: 5rem; padding-bottom: 5rem; } .project-detail-header { text-align: center; margin-bottom: 3rem; } .project-detail-header h1 { font-size: 3rem; margin: 0; } .project-tagline { font-size: 1.2rem; color: var(--text-muted); } .project-detail-image { width: 100%; max-width: 800px; border-radius: 8px; margin: 0 auto 3rem; display: block; } .project-info-box { background: var(--card-background); padding: 2rem; border-radius: 8px; margin-bottom: 2rem; } .project-info-box h3 { color: var(--primary-color); margin-top: 0; } .project-links { text-align: center; margin-top: 3rem; } .project-links .cta-button { margin: 0 0.5rem; } .cta-button.secondary { background-color: var(--card-background); color: var(--primary-color); border: 2px solid var(--primary-color); } /* --- 聯絡頁面 --- */ #contact-form { max-width: 700px; margin: 2rem auto 0; } .form-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } #contact-form input, #contact-form textarea { width: 100%; padding: 1rem; margin-bottom: 1.5rem; background: var(--card-background); border: 1px solid var(--border-color); color: var(--text-color); border-radius: 5px; font-size: 1rem; font-family: var(--body-font); } #contact-form textarea { resize: vertical; min-height: 150px; } #contact-form button { width: 100%; } /* --- 頁尾 --- */ .footer { background-color: #161a25; padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border-color); } .footer .social-links { margin-bottom: 1rem; } .footer .social-links a { margin: 0 15px; color: var(--text-muted); font-size: 1.8rem; transition: color 0.3s ease, transform 0.3s ease; display: inline-block; } .footer .social-links a:hover { color: var(--primary-color); transform: translateY(-3px); } /* --- 動畫 & 響應式 --- */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .navbar .container { flex-direction: column; gap: 1rem; } .about-content { grid-template-columns: 1fr; text-align: center; } .form-group { grid-template-columns: 1fr; } }