SafeRide - 泥?컖 ?μ븷??寃쎈낫 ?쒖뒪??/title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/saferide.css"> </head> <body class="saferide-page"> <a href="index.html" class="saferide-home-btn">Home</a> <section class="sr-hero" id="overview"> <div class="sr-grid sr-hero-grid"> <div class="sr-hero-copy"> <p class="sr-kicker">Code Fair 2024</p> <h1>SafeRide</h1> <p class="sr-subtitle">泥?컖 ?μ븷??寃쎈낫 ?쒖뒪??/p> <p class="sr-desc"> 寃쎌쟻, ?ъ씠?? 釉뚮젅?댄겕?뚯쿂???대룞 以??볦튂湲??ъ슫 ?꾪뿕 ?뚮━瑜??ㅼ떆媛꾩쑝濡?媛먯??섍퀬, ?대? ?쒓컖 以묒떖 寃쎄퀬 ?붾㈃?쇰줈 ?꾪솚????鍮좊Ⅴ寃??곹솴???몄??????덈룄濡??ㅺ퀎??AI ?덉쟾 蹂댁“ ?쒖뒪?쒖엯?덈떎. </p> <div class="sr-inline-meta"> <div> <span>Stack</span> <strong>Python 쨌 YAMNet 쨌 WebSocket</strong> </div> <div> <span>Focus</span> <strong>Accessibility 쨌 Safety 쨌 Real-time AI</strong> </div> <div> <span>Output</span> <strong>?ㅼ떆媛?寃쎄퀬 UI 쨌 ?곹깭 紐⑤땲?곕쭅 쨌 ?뚮┝ 濡쒓렇</strong> </div> </div> </div> <div class="sr-hero-visual"> <figure class="hero-screen hero-screen-main"> <img src="images/saferide/android compact - 3.png" alt="SafeRide 硫붿씤 ?붾㈃"> </figure> <figure class="hero-screen hero-screen-side"> <img src="images/saferide/android compact - 1.png" alt="SafeRide 蹂댁“ ?붾㈃"> </figure> <figure class="hero-screen hero-screen-accent"> <img src="images/saferide/android compact - 9.png" alt="SafeRide ?꾩꽦 ?붾㈃"> </figure> </div> </div> </section> <section class="sr-overview-block"> <div class="sr-grid sr-overview-grid"> <div class="sr-section-copy"> <p class="sr-eng">Overview</p> <h2 class="sr-title">?꾩떆 ?뚯쓬 ?띿뿉??br>?뺣쭚 以묒슂??寃쎄퀬留?怨⑤씪 ?꾨떖?섎뒗 諛⑹떇</h2> <p class="sr-body"> SafeRide??泥?컖 ?μ븷?몄쓽 ?대룞 ?섍꼍??湲곗??쇰줈 ?ㅺ퀎??寃쎈낫 ?쒖뒪?쒖엯?덈떎. 釉뚮씪?곗?媛留덉씠???낅젰??諛쏆븘 audio/webm 泥?겕濡??꾩넚?섍퀬, Python ?쒕쾭媛 ?대? 16kHz ?⑥씪 梨꾨꼸濡?蹂?섑븳 ?? TensorFlow Hub??YAMNet 紐⑤뜽濡??꾪뿕 ?뚮━瑜?遺꾨쪟?⑸땲?? 媛먯? 寃곌낵???ㅼ떆 WebSocket?쇰줈 諛섑솚?섏뼱 ?붾㈃寃쎄퀬, 濡쒓렇, ?곹깭 蹂?붾줈 利됱떆 ?꾨떖?⑸땲?? </p> </div> <aside class="sr-side-panels"> <div class="sr-info-panel"> <dl> <dt>湲곌컙</dt> <dd>2024</dd> </dl> <dl> <dt>?좏삎</dt> <dd>Code Fair 쨌 AI Safety Project</dd> </dl> <dl> <dt>援ъ꽦</dt> <dd>湲고쉷 쨌 ???꾨줈?좏???쨌 Python ?쒕쾭 쨌 AI 紐⑤뜽 ?곌껐</dd> </dl> <dl> <dt>湲곗닠</dt> <dd class="sr-tool-row"> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> <span>Python</span> <span>TensorFlow</span> <span>FFmpeg</span> </dd> </dl> </div> <div class="sr-contents-panel"> <p class="panel-tit">Contents</p> <ul> <li><a href="#draft">01. Design Draft</a></li> <li><a href="#problem">02. Problem</a></li> <li><a href="#flow">03. System Flow</a></li> <li><a href="#concept">04. UI Screens</a></li> <li><a href="#tech">05. Implementation</a></li> <li><a href="#demo">06. Demo Video</a></li> <li><a href="#impact">07. Expected Effect</a></li> </ul> </div> </aside> </div> </section> <section class="sr-prototype" id="draft"> <div class="sr-grid"> <div class="sr-head split"> <div> <p class="sr-eng">Design Draft</p> <h2 class="sr-title">肄붾뵫 ?꾩뿉 癒쇱? ?뺣━??br>珥덇린 ?붾㈃ ?ㅺ퀎 ?쒖븞</h2> </div> <p class="sr-side-copy"> ?ㅼ젣 援ы쁽???ㅼ뼱媛湲??? SafeRide???붾㈃ ?먮쫫怨?二쇱슂 ?붿냼瑜?癒쇱? ?뺣━??珥덇린 ?ㅺ퀎?덉엯?덈떎. </p> </div> <div class="sr-prototype-frame"> <img src="images/saferide/prototype-wide.jpg" alt="SafeRide 珥덇린 ?붾㈃ ?ㅺ퀎 ?쒖븞"> </div> </div> </section> <section class="sr-problem" id="problem"> <div class="sr-grid"> <div class="sr-head split"> <div> <p class="sr-eng">Problem</p> <h2 class="sr-title">?꾪뿕? ?뚮━濡?癒쇱? ?ㅼ?留?<br>紐⑤뱺 ?ъ슜?먭? 媛숈? 諛⑹떇?쇰줈 ?몄??섏????딅뒗??/h2> </div> <p class="sr-side-copy"> ?대룞 以?寃쎄퀬???ㅻ챸蹂대떎 癒쇱? 蹂댁뿬???⑸땲?? SafeRide???ㅻ━吏 ?딅뒗 ?꾪뿕???쒓컖 以묒떖 ?명꽣?섏씠?ㅻ줈 踰덉뿭?섎뒗 ??吏묒쨷?덉뒿?덈떎. </p> </div> <div class="sr-problem-layout"> <div class="sr-problem-list"> <article class="sr-problem-card"> <span class="problem-index">01</span> <strong>寃쎌쟻怨??ъ씠?뚯쓣 ?볦튌 ???덈떎</strong> <p>?꾩떖 ?섍꼍?먯꽌??吏㏐퀬 媛뺥븳 寃쎄퀬?뚯씠 鍮좊Ⅴ寃?吏?섍컩?덈떎. ?몄? 吏?곗? 諛붾줈 ?덉쟾 臾몄젣濡??댁뼱吏????덉뒿?덈떎.</p> </article> <article class="sr-problem-card"> <span class="problem-index">02</span> <strong>?꾪뿕 寃쎄퀬??利됱떆 ?댄빐?섏뼱???쒕떎</strong> <p>二쇳뻾 ?곹솴?먯꽌??蹂듭옟???ㅻ챸蹂대떎 紐낇솗????蹂?? ??移댁슫?? 吏㏃? 臾몄옣????鍮좊Ⅸ ?먮떒???뺤뒿?덈떎.</p> </article> <article class="sr-problem-card"> <span class="problem-index">03</span> <strong>?쇰컲 ?뚯쓬怨??꾪뿕 ?뚯쓬??援щ텇?댁빞 ?쒕떎</strong> <p>紐⑤뱺 ?뚮━媛寃쎄퀬媛 ?섎㈃ ?쒖뒪?쒖? 湲덈갑 ?쇰줈?댁쭛?덈떎. 洹몃옒??遺꾨쪟 紐⑤뜽怨??꾧퀎媛??ㅺ퀎媛 ?듭떖?낅땲??</p> </article> </div> <div class="sr-problem-shots"> <figure class="sr-image-card shot-card-a"> <img src="images/saferide/android compact - 4.png" alt="SafeRide 臾몄젣 ?뺤쓽 愿???붾㈃ 1"> </figure> <figure class="sr-image-card shot-card-b"> <img src="images/saferide/android compact - 5.png" alt="SafeRide 臾몄젣 ?뺤쓽 愿???붾㈃ 2"> </figure> </div> </div> </div> </section> <section class="sr-flow" id="flow"> <div class="sr-grid"> <div class="sr-center-head"> <p class="sr-eng light">System Flow</p> <h2 class="sr-title light">釉뚮씪?곗??먯꽌 ?섏쭛???뚮━瑜?br>?ㅼ떆媛?寃쎄퀬 寃쏀뿕?쇰줈 諛붽씀??援ъ“</h2> </div> <div class="sr-flow-track"> <article class="sr-flow-card"> <span>01</span> <strong>Microphone Access</strong> <p>釉뚮씪?곗??먯꽌 留덉씠??沅뚰븳??諛쏄퀬 MediaRecorder濡??ㅻ뵒?ㅻ? 泥?겕 ?⑥쐞濡?罹≪쿂?⑸땲??</p> </article> <article class="sr-flow-card"> <span>02</span> <strong>Audio Streaming</strong> <p>audio/webm ?곗씠?곕? WebSocket?쇰줈 ?쒕쾭???꾩넚???ㅼ떆媛?泥섎━ 援ъ“瑜?留뚮벊?덈떎.</p> </article> <article class="sr-flow-card"> <span>03</span> <strong>Decode & Resample</strong> <p>?쒕쾭?먯꽌 ffmpeg ?먮뒗 pydub濡?16kHz 紐⑤끂 waveform?쇰줈 蹂?섑빀?덈떎.</p> </article> <article class="sr-flow-card"> <span>04</span> <strong>YAMNet Classification</strong> <p>?꾪뿕 ?뚮━ ?꾨낫援곗쓣 遺꾨쪟?섍퀬 ?됯퇏 score 湲곗??쇰줈 ?꾧퀎媛믪쓣 ?섎뒗 ?대깽?몃? ?좊퀎?⑸땲??</p> </article> <article class="sr-flow-card"> <span>05</span> <strong>Alert Feedback</strong> <p>媛먯? 寃곌낵瑜??ㅼ떆 WebSocket?쇰줈 蹂대궡 ?쒓컖 寃쎄퀬, 濡쒓렇, ?곹깭 ?⑤꼸??利됱떆 諛섏쁺?⑸땲??</p> </article> </div> <div class="sr-detect-box"> <div class="sr-detect-copy"> <p class="panel-tit">Detected Classes</p> <strong>肄붾뱶?먯꽌 ?꾪뿕 ?꾨낫濡??ㅻ（???뚮━</strong> <span> `Vehicle`, `Car horn`, `Emergency vehicle`, `Ambulance`, `Siren`, `Bicycle bell`, `Brake squeal` ???ㅼ젣 二쇳뻾 ?곹솴怨??곌껐???뚮━瑜?以묒떖?쇰줈 遺꾨쪟?⑸땲?? </span> </div> <div class="sr-chip-wrap"> <span>Vehicle</span> <span>Traffic noise</span> <span>Car horn</span> <span>Emergency vehicle</span> <span>Ambulance siren</span> <span>Bicycle bell</span> <span>Brake squeal</span> <span>Skidding</span> </div> </div> </div> </section> <section class="sr-ui" id="concept"> <div class="sr-grid"> <div class="sr-head"> <div> <p class="sr-eng">UI Screens</p> <h2 class="sr-title">?ㅼ젣 ?붾㈃ ?대?吏湲곗??쇰줈 ?뺣━??br>SafeRide??二쇱슂 ?명꽣?섏씠??/h2> </div> </div> <div class="sr-screen-grid"> <figure class="sr-screen-shot shot-lg"> <img src="images/saferide/android compact - 9.png" alt="SafeRide ????붾㈃"> <figcaption>????붾㈃</figcaption> </figure> <figure class="sr-screen-shot shot-sm top-gap"> <img src="images/saferide/android compact - 6.png" alt="SafeRide 硫붿씤 ?명꽣?섏씠???붾㈃"> <figcaption>硫붿씤 ?명꽣?섏씠??/figcaption> </figure> <figure class="sr-screen-shot shot-sm"> <img src="images/saferide/android compact - 7.png" alt="SafeRide ?뚮┝ 諛??곹깭 ?붾㈃"> <figcaption>?뚮┝ 諛??곹깭 ?붾㈃</figcaption> </figure> <figure class="sr-screen-shot shot-sm top-gap"> <img src="images/saferide/android compact - 8.png" alt="SafeRide 異붽? 湲곕뒫 ?붾㈃"> <figcaption>異붽? 湲곕뒫 ?붾㈃</figcaption> </figure> </div> </div> </section> <section class="sr-tech" id="tech"> <div class="sr-grid"> <div class="sr-head split"> <div> <p class="sr-eng">Implementation</p> <h2 class="sr-title">?ㅼ젣 援ы쁽 ?뚯씪 湲곗??쇰줈 ?뺣━??br>SafeRide??湲곗닠 援ъ“</h2> </div> <p class="sr-side-copy"> 釉뚮씪?곗?? Python ?쒕쾭瑜?WebSocket?쇰줈 ?곌껐?섍퀬, ?ㅻ뵒???붿퐫???댄썑 YAMNet?쇰줈 遺꾨쪟?섎뒗 援ъ꽦???듭떖?낅땲?? </p> </div> <div class="sr-tech-grid"> <article class="sr-tech-card"> <p class="panel-tit">Frontend</p> <strong>釉뚮씪?곗??먯꽌 ?ㅻ뵒???섏쭛</strong> <span>`getUserMedia`, `MediaRecorder`, WebSocket ?곌껐, ?곹깭 硫붿떆吏? 寃쎄퀬 ?⑤꼸 ?쒖떆</span> </article> <article class="sr-tech-card"> <p class="panel-tit">Backend</p> <strong>Python 湲곕컲 ?ㅼ떆媛?泥섎━</strong> <span>`server.py`, `yamnet_websocket_server.py`?먯꽌 Flask Sock ?먮뒗 websockets 援ъ“濡??ㅼ떆媛??섏떊</span> </article> <article class="sr-tech-card"> <p class="panel-tit">AI Model</p> <strong>YAMNet ?꾪뿕 ?뚮━ 遺꾨쪟</strong> <span>TensorFlow Hub??YAMNet??遺덈윭? ?됯퇏 score 湲곕컲?쇰줈 ?꾪뿕 ?대깽?몃? ?좊퀎?섍퀬 ?꾧퀎媛?0.5瑜??곸슜</span> </article> <article class="sr-tech-card"> <p class="panel-tit">Processing</p> <strong>16kHz waveform 蹂??/strong> <span>ffmpeg ?먮뒗 pydub瑜??ъ슜??WebM ?ㅻ뵒?ㅻ? 紐⑤뜽 ?낅젰 ?뺤떇?쇰줈 蹂?섑븯怨?遺꾨쪟 ?뺥솗?꾨? 留욎톬?듬땲??</span> </article> </div> <div class="sr-file-strip"> <span>index.html</span> <span>server.py</span> <span>yamnet_websocket_server.py</span> <span>realtime_yamnet_mic.py</span> <span>?쒕ぉ ?녿뒗 ?ㅼ씠?닿렇??drawio</span> </div> </div> </section> <section class="sr-demo" id="demo"> <div class="sr-grid"> <div class="sr-head split"> <div> <p class="sr-eng">Demo Video</p> <h2 class="sr-title">?ㅼ젣 ?ㅽ뻾 ?먮쫫????踰덉뿉 蹂댁뿬二쇰뒗<br>SafeRide ?쒖뿰 ?곸긽</h2> </div> <p class="sr-side-copy"> 湲고쉷 ?붾㈃???꾨땲???ㅼ젣 ?숈옉 怨쇱젙??諛붾줈 ?뺤씤?????덈룄濡? ?꾨줈?앺듃 ?ㅽ뻾 ?곸긽???섏씠吏 ?덉뿉???댁뼱??蹂????덇쾶 援ъ꽦?덉뒿?덈떎. </p> </div> <div class="sr-demo-layout"> <div class="sr-demo-frame"> <iframe src="https://www.youtube.com/embed/l9CggSj2cN0?rel=0" title="SafeRide Demo Video" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div> <div class="sr-demo-copy"> <p class="panel-tit">Project Demo</p> <strong>?뚯꽦 媛먯?遺??寃쎄퀬 ?쇰뱶諛깃퉴吏</strong> <span> SafeRide媛 ?대뼡 諛⑹떇?쇰줈 ?뚮━瑜?諛쏆븘?ㅼ씠怨? 遺꾨쪟?섍퀬, ?ъ슜???붾㈃??寃쎄퀬瑜??꾨떖?섎뒗吏 ?ㅼ젣 ?쒖뿰 湲곗??쇰줈 ?뺤씤?????덈뒗 湲곕줉 ?곸긽?낅땲?? </span> <div class="sr-demo-points"> <span>Real-time Detection</span> <span>Warning UI Flow</span> <span>System Response</span> </div> </div> </div> </div> </section> <section class="sr-impact" id="impact"> <div class="sr-grid"> <div class="sr-center-head"> <p class="sr-eng light">Expected Effect</p> <h2 class="sr-title light">?덈궡媛 ?꾨땲??寃쎄퀬??吏묒쨷??br>?ㅼ젣 ?대룞 ?덉쟾?깆쓣 ?믪씠??諛⑺뼢</h2> </div> <div class="sr-impact-grid"> <article class="sr-impact-card"> <strong>利됯컖?곸씤 ?꾪뿕 ?몄?</strong> <p>?뚮━瑜?吏곸젒 ?ｌ? 紐삵빐?? 寃쎄퀬瑜??붾㈃怨??곹깭 蹂?붾줈 鍮좊Ⅴ寃?諛쏆븘 ?꾪뿕 ????쒓컙??以꾩씪 ???덉뒿?덈떎.</p> </article> <article class="sr-impact-card"> <strong>?묎렐??以묒떖 ?ㅺ퀎</strong> <p>泥?컖 以묒떖 ?뚮┝???쒓컖 以묒떖 ?명꽣?섏씠?ㅻ줈 蹂?섑빐 ?대룞 寃쏀뿕 ?먯껜瑜???怨듯룊?섍쾶 留뚮뱶??諛⑺뼢???쒖븞?⑸땲??</p> </article> <article class="sr-impact-card"> <strong>?뺤옣 媛?ν븳 ?덉쟾 ?뚮옯??/strong> <p>?ν썑 吏꾨룞, ?⑥뼱?щ툝, 吏??寃쎄퀬, 二쇳뻾 湲곕줉怨?寃고빀?섎㈃ ???ㅼ슜?곸씤 ?덉쟾 蹂댁“ ?쒕퉬?ㅻ줈 ?뺤옣?????덉뒿?덈떎.</p> </article> </div> <div class="sr-ending-quote"> <p>SafeRide???뚮━瑜??ш쾶 ?ㅻ젮二쇰뒗 ?쒖뒪?쒖씠 ?꾨땲??</p> <strong>?볦튂湲??ъ슫 ?꾪뿕????鍮좊Ⅴ寃?蹂댁씠寃?留뚮뱶??寃쎄퀬 寃쏀뿕</strong> </div> </div> </section> <section class="sr-links"> <div class="sr-grid"> <div class="sr-link-wrap"> <a href="https://github.com/seojeonghoo/saferide.git" target="_blank" rel="noopener noreferrer" class="sr-link-btn sr-link-github">GitHub</a> <button type="button" class="sr-link-btn sr-link-figma">Figma</button> <button type="button" class="sr-link-btn sr-link-pdf">PDF</button> <button type="button" class="sr-link-btn sr-link-pdf sr-link-pdf-pt">PPT PDF</button> </div> </div> </section> <div class="sr-figma-modal"> <div class="sr-figma-bg"></div> <div class="sr-figma-dialog"> <div class="sr-figma-head"> <strong>SafeRide Figma 誘몃━蹂닿린</strong> <button type="button" class="sr-figma-close">?リ린</button> </div> <div class="sr-figma-body"> <iframe src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2Fb3s4X6OIc7GWtvFAucCUXt%2FSafeRide-app-figma-ver%3Fpage-id%3D1%253A2%26node-id%3D81-561%26p%3Df%26viewport%3D-1915%252C-344%252C0.23%26t%3DQDe9i5aIP4D6KdBO-1%26scaling%3Dscale-down%26content-scaling%3Dfixed%26starting-point-node-id%3D81%253A561%26show-proto-sidebar%3D1" allowfullscreen title="SafeRide Figma 誘몃━蹂닿린"></iframe> </div> </div> </div> <div class="sr-pdf-modal"> <div class="sr-pdf-bg"></div> <div class="sr-pdf-dialog"> <div class="sr-pdf-head"> <strong>SafeRide PDF 誘몃━蹂닿린</strong> <button type="button" class="sr-pdf-close">?リ린</button> </div> <div class="sr-pdf-body"> <object data="files/saferide-project.pdf#toolbar=0" type="application/pdf"> <iframe src="files/saferide-project.pdf#toolbar=0" title="SafeRide PDF 誘몃━蹂닿린"></iframe> </object> </div> </div> </div> <div class="sr-pdf-modal sr-pdf-modal-pt"> <div class="sr-pdf-bg sr-pdf-bg-pt"></div> <div class="sr-pdf-dialog"> <div class="sr-pdf-head"> <strong>SafeRide PPT PDF 誘몃━蹂닿린</strong> <button type="button" class="sr-pdf-close sr-pdf-close-pt">?リ린</button> </div> <div class="sr-pdf-body"> <object data="files/saferide-ppt.pdf#toolbar=0" type="application/pdf"> <iframe src="files/saferide-ppt.pdf#toolbar=0" title="SafeRide PPT PDF 誘몃━蹂닿린"></iframe> </object> </div> </div> </div> <script> const bindSaferideModal = (modalSelector, triggerSelector, closeSelector, bgSelector) => { const modal = document.querySelector(modalSelector); const trigger = document.querySelector(triggerSelector); const close = document.querySelector(closeSelector); const bg = document.querySelector(bgSelector); if (!modal || !trigger || !close || !bg) { return null; } const closeModal = () => { modal.classList.remove('open'); document.documentElement.style.overflowY = ''; }; trigger.addEventListener('click', () => { modal.classList.add('open'); document.documentElement.style.overflowY = 'hidden'; }); close.addEventListener('click', closeModal); bg.addEventListener('click', closeModal); return closeModal; }; const saferideCloseFigma = bindSaferideModal( '.sr-figma-modal', '.sr-link-figma', '.sr-figma-close', '.sr-figma-bg' ); const saferideClosePdf = bindSaferideModal( '.sr-pdf-modal', '.sr-link-pdf', '.sr-pdf-close', '.sr-pdf-bg' ); const saferideClosePptPdf = bindSaferideModal( '.sr-pdf-modal-pt', '.sr-link-pdf-pt', '.sr-pdf-close-pt', '.sr-pdf-bg-pt' ); document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { if (saferideCloseFigma) { saferideCloseFigma(); } if (saferideClosePdf) { saferideClosePdf(); } if (saferideClosePptPdf) { saferideClosePptPdf(); } } }); </script> </body> </html>