Hugging Face's logo

Spaces:
bep40
/
super-light-lab
Running

App Files Community
super-light-lab
File size: 6,788 Bytes
6253ff1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tin tức Tự động - Trích xuất & Phân tích</title>
    <meta name="description" content="Công cụ tự động trích xuất nội dung và hình ảnh từ bài báo">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header-content">
                <h1 class="logo">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                        <path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>
                    </svg>
                    News Extractor
                </h1>
                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
            </div>
        </div>
    </header>

    <main class="main">
        <div class="container">
            <section class="url-input-section">
                <div class="input-card">
                    <h2>Nhập URL tin tức</h2>
                    <p class="subtitle">Dán đường dẫn bài báo vào ô bên dưới để trích xuất nội dung</p>
                    <form id="urlForm" class="url-form">
                        <div class="input-group">
                            <input 
                                type="url" 
                                id="urlInput" 
                                placeholder="https://vnexpress.net/bai-viet-tin-tuc..." 
                                required
                                pattern="https?://.+"
                            >
                            <button type="submit" id="extractBtn" class="extract-btn">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="9 11 12 14 22 4"/>
                                    <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
                                </svg>
                                Trích xuất
                            </button>
                        </div>
                    </form>
                    <div id="errorMessage" class="error-message hidden"></div>
                </div>
            </section>

            <section id="loadingSection" class="loading-section hidden">
                <div class="loading-card">
                    <div class="spinner"></div>
                    <p>Đang tải và phân tích nội dung...</p>
                </div>
            </section>

            <section id="resultsSection" class="results-section hidden">
                <div class="results-header">
                    <h2>Kết quả phân tích</h2>
                    <button id="newSearchBtn" class="new-search-btn">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M23 4v6h-6M1 20v-6h6"/>
                            <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
                        </svg>
                        Tìm kiếm mới
                    </button>
                </div>

                <div class="results-grid">
                    <div class="content-card">
                        <h3>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                                <line x1="16" y1="13" x2="8" y2="13"/>
                                <line x1="16" y1="17" x2="8" y2="17"/>
                                <polyline points="10 9 9 9 8 9"/>
                            </svg>
                            Thông tin bài viết
                        </h3>
                        <div id="articleInfo" class="article-info"></div>
                        
                        <h3 class="mt-4">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
                            </svg>
                            Các ý chính
                        </h3>
                        <div id="keyPoints" class="key-points"></div>
                    </div>

                    <div class="images-card">
                        <h3>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                <circle cx="8.5" cy="8.5" r="1.5"/>
                                <polyline points="21 15 16 10 5 21"/>
                            </svg>
                            Hình ảnh trong bài
                        </h3>
                        <div id="imagesGallery" class="images-gallery"></div>
                    </div>
                </div>

                <div class="full-content-card">
                    <h3>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/>
                            <path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/>
                        </svg>
                        Nội dung đầy đủ
                    </h3>
                    <div id="fullContent" class="full-content"></div>
                </div>
            </section>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 News Extractor. Công cụ trích xuất tin tức tự động.</p>
        </div>
    </footer>

    <div id="imageModal" class="image-modal hidden">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <img id="modalImage" src="" alt="Hình ảnh lớn">
        </div>
    </div>

    <script src="assets/js/main.js"></script>
</body>
</html>