M4

import React, { useEffect, useRef } from 'react'; const Installation = () => { const videoContainerRef = useRef(null); useEffect(() => { const loadVideo = (container) => { if (!container) return; const videoUrl = 'm4_website_2.mp4'; const videoPath = `/m4/videos/${videoUrl}`; const video = document.createElement('video'); video.controls = true; video.autoplay = true; video.muted = true; video.loop = true; video.style.width = '100%'; video.style.height = '100%'; video.style.objectFit = 'cover'; video.src = videoPath; video.onloadeddata = () => { container.innerHTML = ''; container.appendChild(video); video.play().catch(error => console.error("Autoplay was prevented: ", error)); }; video.onerror = () => { container.innerHTML = ` <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; flex-direction: column; gap: 16px;"> <div style="font-size: 48px;">🎥</div> <div>Video not found: ${videoUrl}</div> <div style="font-size: 14px; opacity: 0.7;">Place videos in <code>public/videos</code></div> </div> `; }; }; loadVideo(videoContainerRef.current); }, []); return ( <section className="installation-section" id="installation"> {/* Video Banner */} <div className="container" style={{ padding: '60px 0' }}> <div className="section-header"> <h2>Installation Guide</h2> <p>Follow the steps below to get m4 up and running on your system.</p> </div> <div className="demo-card" style={{ maxWidth: '800px', margin: '0 auto' }}> <div className="video-container" ref={videoContainerRef}> <div className="video-overlay">1:18 min</div> <div className="play-button"></div> </div> <div className="demo-content"> <h3>Watch the Installation Walkthrough</h3> <p>This video provides a step-by-step guide to installing the m4 protocol and connecting to the MIMIC database for the first time.</p> </div> </div> </div> {/* Installation Steps */} <div className="container" style={{ padding: '60px 0' }}> <div className="paper-preview" style={{ marginBottom: '40px' }}> <h3>Prerequisites</h3> <p>Before you begin, ensure you have the following installed on your system:</p> <ul className="explanation-features" style={{ marginTop: '20px' }}> <li>Python 3.10 or higher</li> <li>pip (Python package installer)</li> <li>Access to the MIMIC-IV database.</li> </ul> </div> <div className="paper-preview" style={{ marginBottom: '40px' }}> <h3>Option A: Install from PyPI (Recommended)</h3> <h4>Step 1: Create Virtual Environment</h4> <div className="code-snippet"> <span className="comment"># Create virtual environment (recommended)</span><br/> python -m venv .venv<br/> source .venv/bin/activate <span className="comment"># Windows: .venv\Scripts\activate</span> </div> <h4>Step 2: Install M4</h4> <div className="code-snippet"> <span className="comment"># Install M4</span><br/> pip install m4-mcp </div> </div> <div className="paper-preview" style={{ marginBottom: '40px' }}> <h3>Option B: Install from Source</h3> <h4>Step 1: Clone and Navigate</h4> <div className="code-snippet"> <span className="comment"># Clone the repository</span><br/> git clone https://github.com/rafiattrach/m4.git<br/> cd m4 </div> <h4>Step 2: Create Virtual Environment</h4> <div className="code-snippet"> <span className="comment"># Create virtual environment</span><br/> python -m venv .venv<br/> source .venv/bin/activate <span className="comment"># Windows: .venv\Scripts\activate</span> </div> <h4>Step 3: Install M4</h4> <div className="code-snippet"> <span className="comment"># Install M4</span><br/> pip install . </div> </div> </div> </section> ); }; export default Installation;