Upload 7 files

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY . .
+
+# Expose port 7860 (Hugging Face Spaces default port)
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -1,12 +1,22 @@
----
-title: Light
-emoji: 💻
-colorFrom: green
-colorTo: blue
-sdk: gradio
-sdk_version: 6.0.2
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Light Control
+emoji: 💡
+colorFrom: gray
+colorTo: yellow
+sdk: docker
+pinned: false
+---
+
+# Hệ Thống Điều Khiển Đèn Thông Minh
+
+Ứng dụng web đơn giản để điều khiển đèn với giao diện tối giản.
+
+## Tính năng
+- 💡 Bật/tắt đèn qua giao diện web
+- 🎨 Giao diện tối giản, dễ sử dụng
+- 🔄 Tự động cập nhật trạng thái
+
+## Công nghệ
+- Flask (Python)
+- HTML/CSS/JavaScript
+- Docker

app.py

@@ -0,0 +1,56 @@
+from flask import Flask, render_template, jsonify, request
+from flask_cors import CORS
+
+app = Flask(__name__)
+CORS(app)
+
+# Trạng thái đèn (lưu trong memory, có thể thay bằng database)
+light_status = {
+    'on': False
+}
+
+@app.route('/')
+def index():
+    """Trang chủ với giao diện điều khiển đèn"""
+    return render_template('index.html')
+
+@app.route('/api/light/status', methods=['GET'])
+def get_light_status():
+    """API lấy trạng thái đèn hiện tại"""
+    return jsonify({
+        'status': 'on' if light_status['on'] else 'off',
+        'on': light_status['on']
+    })
+
+@app.route('/api/light/toggle', methods=['POST'])
+def toggle_light():
+    """API bật/tắt đèn"""
+    light_status['on'] = not light_status['on']
+    return jsonify({
+        'status': 'on' if light_status['on'] else 'off',
+        'on': light_status['on'],
+        'message': 'Đèn đã bật' if light_status['on'] else 'Đèn đã tắt'
+    })
+
+@app.route('/api/light/on', methods=['POST'])
+def turn_on():
+    """API bật đèn"""
+    light_status['on'] = True
+    return jsonify({
+        'status': 'on',
+        'on': True,
+        'message': 'Đèn đã bật'
+    })
+
+@app.route('/api/light/off', methods=['POST'])
+def turn_off():
+    """API tắt đèn"""
+    light_status['on'] = False
+    return jsonify({
+        'status': 'off',
+        'on': False,
+        'message': 'Đèn đã tắt'
+    })
+
+if __name__ == '__main__':
+    app.run(debug=False, host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,2 @@
+Flask==3.0.0
+flask-cors==4.0.0

static/css/style.css

@@ -0,0 +1,201 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: #f5f5f5;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    background: white;
+    border-radius: 10px;
+    padding: 40px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+}
+
+h1 {
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 1.8em;
+    font-weight: 600;
+}
+
+.light-container {
+    margin: 40px 0;
+}
+
+.bulb-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.bulb {
+    font-size: 100px;
+    transition: all 0.2s ease;
+    filter: grayscale(100%);
+    position: relative;
+    display: inline-block;
+}
+
+.bulb.on {
+    filter: grayscale(0%);
+}
+
+.bulb-glow {
+    display: none;
+}
+
+.status-text {
+    font-size: 1.2em;
+    font-weight: 500;
+    margin-top: 20px;
+    color: #666;
+    transition: color 0.2s ease;
+}
+
+.status-text.on {
+    color: #333;
+}
+
+.controls {
+    margin: 30px 0;
+}
+
+.btn {
+    padding: 12px 24px;
+    font-size: 1em;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-weight: 500;
+    margin: 8px;
+    background: white;
+    color: #333;
+}
+
+.btn:hover {
+    background: #f8f8f8;
+    border-color: #bbb;
+}
+
+.btn:active {
+    background: #e8e8e8;
+}
+
+.btn-toggle {
+    background: #333;
+    color: white;
+    border-color: #333;
+    width: 100%;
+    font-size: 1em;
+}
+
+.btn-toggle:hover {
+    background: #555;
+    border-color: #555;
+}
+
+.button-group {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.btn-on {
+    background: white;
+    color: #333;
+    flex: 1;
+}
+
+.btn-on:hover {
+    background: #f8f8f8;
+}
+
+.btn-off {
+    background: white;
+    color: #333;
+    flex: 1;
+}
+
+.btn-off:hover {
+    background: #f8f8f8;
+}
+
+.info-panel {
+    background: #fafafa;
+    border-radius: 5px;
+    padding: 15px;
+    margin-top: 25px;
+    border: 1px solid #e0e0e0;
+}
+
+.info-panel h3 {
+    color: #555;
+    margin-bottom: 10px;
+    font-size: 1em;
+    font-weight: 600;
+}
+
+.info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+}
+
+.info-item span:first-child {
+    color: #666;
+    font-weight: 400;
+}
+
+.status-badge {
+    padding: 4px 12px;
+    border-radius: 3px;
+    font-weight: 500;
+    font-size: 0.85em;
+}
+
+.status-badge.on {
+    background: #333;
+    color: white;
+}
+
+.status-badge.off {
+    background: #e0e0e0;
+    color: #666;
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 20px;
+    }
+    
+    h1 {
+        font-size: 1.5em;
+    }
+    
+    .bulb {
+        font-size: 80px;
+    }
+    
+    .button-group {
+        flex-direction: column;
+    }
+    
+    .btn-on, .btn-off {
+        width: 100%;
+    }
+}

static/js/script.js

@@ -0,0 +1,148 @@
+// Cập nhật giao diện dựa trên trạng thái đèn
+function updateUI(isOn) {
+    const bulb = document.getElementById('bulb');
+    const statusText = document.getElementById('statusText');
+    const currentStatus = document.getElementById('currentStatus');
+    
+    if (isOn) {
+        bulb.classList.add('on');
+        statusText.classList.add('on');
+        statusText.textContent = 'Đèn đang bật';
+        currentStatus.textContent = 'BẬT';
+        currentStatus.classList.remove('off');
+        currentStatus.classList.add('on');
+    } else {
+        bulb.classList.remove('on');
+        statusText.classList.remove('on');
+        statusText.textContent = 'Đèn đang tắt';
+        currentStatus.textContent = 'TẮT';
+        currentStatus.classList.remove('on');
+        currentStatus.classList.add('off');
+    }
+}
+
+// Lấy trạng thái đèn hiện tại
+async function getStatus() {
+    try {
+        const response = await fetch('/api/light/status');
+        const data = await response.json();
+        updateUI(data.on);
+    } catch (error) {
+        console.error('Lỗi khi lấy trạng thái:', error);
+        alert('Không thể kết nối với server!');
+    }
+}
+
+// Bật/tắt đèn
+async function toggleLight() {
+    try {
+        const response = await fetch('/api/light/toggle', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        const data = await response.json();
+        updateUI(data.on);
+        showNotification(data.message);
+    } catch (error) {
+        console.error('Lỗi khi chuyển đổi đèn:', error);
+        alert('Không thể kết nối với server!');
+    }
+}
+
+// Bật đèn
+async function turnOn() {
+    try {
+        const response = await fetch('/api/light/on', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        const data = await response.json();
+        updateUI(data.on);
+        showNotification(data.message);
+    } catch (error) {
+        console.error('Lỗi khi bật đèn:', error);
+        alert('Không thể kết nối với server!');
+    }
+}
+
+// Tắt đèn
+async function turnOff() {
+    try {
+        const response = await fetch('/api/light/off', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        const data = await response.json();
+        updateUI(data.on);
+        showNotification(data.message);
+    } catch (error) {
+        console.error('Lỗi khi tắt đèn:', error);
+        alert('Không thể kết nối với server!');
+    }
+}
+
+// Hiển thị thông báo
+function showNotification(message) {
+    const notification = document.createElement('div');
+    notification.className = 'notification';
+    notification.textContent = message;
+    notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: #333;
+        color: white;
+        padding: 12px 20px;
+        border-radius: 5px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        z-index: 1000;
+        font-size: 0.9em;
+        animation: slideIn 0.3s ease;
+    `;
+    
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        notification.style.animation = 'slideOut 0.3s ease';
+        setTimeout(() => notification.remove(), 300);
+    }, 2500);
+}
+
+// Thêm CSS cho animation
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideIn {
+        from {
+            transform: translateX(400px);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes slideOut {
+        from {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateX(400px);
+            opacity: 0;
+        }
+    }
+`;
+document.head.appendChild(style);
+
+// Lấy trạng thái khi trang load
+window.addEventListener('DOMContentLoaded', getStatus);
+
+// Cập nhật trạng thái mỗi 5 giây
+setInterval(getStatus, 5000);

templates/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Điều Khiển Đèn Thông Minh</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="container">
+        <h1>🏠 Điều Khiển Đèn Thông Minh</h1>
+        
+        <div class="light-container">
+            <div class="bulb-wrapper">
+                <div class="bulb" id="bulb">
+                    <div class="bulb-glow"></div>
+                    💡
+                </div>
+            </div>
+            
+            <div class="status-text" id="statusText">
+                Đèn đang tắt
+            </div>
+        </div>
+
+        <div class="controls">
+            <button class="btn btn-toggle" id="toggleBtn" onclick="toggleLight()">
+                Bật/Tắt Đèn
+            </button>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>