Update app.py

app.py

@@ -261,7 +261,7 @@ if __name__ == '__main__':
     
     .grid-container {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
       gap: 1.5rem;
     }
     
@@ -269,28 +269,40 @@ if __name__ == '__main__':
       background-color: #ffffff;
       border-radius: 8px;
       overflow: hidden;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
       display: flex;
       flex-direction: column;
+      height: 600px;
     }
     
     .grid-header {
-      padding: 1rem;
+      padding: 0.8rem;
       border-bottom: 1px solid #eee;
       background-color: #f9f9f9;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
     
     .grid-header h3 {
       margin: 0;
       padding: 0;
-      font-size: 1.2rem;
+      font-size: 1.1rem;
       color: #333;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .open-link {
+      color: #4CAF50;
+      text-decoration: none;
+      font-size: 0.9rem;
     }
     
     .grid-content {
       flex: 1;
       position: relative;
-      height: 500px;
       overflow: hidden;
     }
     
@@ -379,26 +391,26 @@ if __name__ == '__main__':
     <div class="header">
       <div class="user-controls">
         <div>
-          <span>Huggingface Account: </span>
-          <span id="currentUser">Not logged in</span>
+          <span>허깅페이스 계정: </span>
+          <span id="currentUser">로그인되지 않음</span>
         </div>
         
         <div id="loginSection" class="login-section">
-          <input type="password" id="tokenInput" placeholder="Enter Huggingface API Token" />
-          <button id="loginButton">Authenticate</button>
+          <input type="password" id="tokenInput" placeholder="허깅페이스 API 토큰 입력" />
+          <button id="loginButton">인증하기</button>
           <div class="token-help">
-            You can generate an API token on the <a href="https://huggingface.co/settings/tokens" target="_blank">Huggingface tokens page</a>.
+            API 토큰은 <a href="https://huggingface.co/settings/tokens" target="_blank">허깅페이스 토큰 페이지</a>에서 생성할 수 있습니다.
           </div>
         </div>
         
         <div id="loggedInSection" class="logged-in-section">
-          <button id="logoutButton" class="logout">Logout</button>
+          <button id="logoutButton" class="logout">로그아웃</button>
         </div>
       </div>
     </div>
     
     <div class="filter-controls">
-      <input type="text" id="searchInput" placeholder="Search by URL or title" />
+      <input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" />
     </div>
     
     <div id="statusMessage" class="status-message"></div>
@@ -534,7 +546,7 @@ if __name__ == '__main__':
         if (data.success) {
           state.username = null;
           
-          elements.currentUser.textContent = 'Not logged in';
+          elements.currentUser.textContent = '로그인되지 않음';
           elements.tokenInput.value = '';
           elements.loginSection.style.display = 'block';
           elements.loggedInSection.style.display = 'none';
@@ -577,7 +589,7 @@ if __name__ == '__main__':
       
       if (!urls || urls.length === 0) {
         const noResultsMsg = document.createElement('p');
-        noResultsMsg.textContent = 'No URLs to display.';
+        noResultsMsg.textContent = '표시할 URL이 없습니다.';
         noResultsMsg.style.padding = '1rem';
         noResultsMsg.style.fontStyle = 'italic';
         elements.gridContainer.appendChild(noResultsMsg);
@@ -591,7 +603,7 @@ if __name__ == '__main__':
         const gridItem = document.createElement('div');
         gridItem.className = 'grid-item';
         
-        // Header with title
+        // Header with title and link
         const header = document.createElement('div');
         header.className = 'grid-header';
         
@@ -599,6 +611,13 @@ if __name__ == '__main__':
         titleEl.textContent = title;
         header.appendChild(titleEl);
         
+        const linkEl = document.createElement('a');
+        linkEl.href = url;
+        linkEl.target = '_blank';
+        linkEl.className = 'open-link';
+        linkEl.textContent = '새 창에서 열기';
+        header.appendChild(linkEl);
+        
         // Add header to grid item
         gridItem.appendChild(header);
         
@@ -606,10 +625,13 @@ if __name__ == '__main__':
         const content = document.createElement('div');
         content.className = 'grid-content';
         
+        // Create iframe to display the actual content
         const iframe = document.createElement('iframe');
         iframe.src = url;
         iframe.title = title;
-        iframe.loading = 'lazy'; // Lazy load iframes
+        iframe.sandbox = 'allow-same-origin allow-scripts allow-popups allow-forms';
+        iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi';
+        iframe.loading = 'lazy'; // Lazy load iframes for better performance
         
         content.appendChild(iframe);
         
@@ -650,4 +672,4 @@ if __name__ == '__main__':
 ''')
     
     # Use port 7860 for Huggingface Spaces
-    app.run(host='0.0.0.0', port=7860)    
+    app.run(host='0.0.0.0', port=7860)