Spaces:
Sleeping
Sleeping
| # AI Research Assistant Interface | |
| Based on your requirements, I'll create a clean, responsive web interface for an AI research assistant that specializes in web research and content extraction. | |
| === index.html === | |
| <!DOCTYPE html> | |
| <html lang="pl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Zaawansowany Asystent AI do bada艅 internetowych i ekstrakcji tre艣ci"> | |
| <meta name="keywords" content="AI, research, web scraping, content extraction, data saving"> | |
| <title>AI Research Assistant</title> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <h1>AI Research Assistant</h1> | |
| <p>Zaawansowany asystent do bada艅 internetowych i ekstrakcji tre艣ci</p> | |
| </div> | |
| </header> | |
| <main class="container"> | |
| <section class="intro"> | |
| <h2>Jak mog臋 Ci pom贸c?</h2> | |
| <p>Jestem specjalist膮 w badaniach internetowych i ekstrakcji tre艣ci. Wybierz jedn膮 z poni偶szych opcji:</p> | |
| </section> | |
| <div class="tabs"> | |
| <div class="tab-buttons"> | |
| <button class="tab-button active" data-tab="search">Wyszukiwanie WWW</button> | |
| <button class="tab-button" data-tab="scrape">Scrapowanie strony</button> | |
| <button class="tab-button" data-tab="save">Zapisywanie plik贸w</button> | |
| </div> | |
| <div class="tab-content"> | |
| <div id="search-tab" class="tab-pane active"> | |
| <h3>Wyszukiwanie informacji w internecie</h3> | |
| <p>Wprowad藕 zapytanie, a przeszukam internet w poszukiwaniu odpowiedzi.</p> | |
| <form id="search-form"> | |
| <div class="form-group"> | |
| <label for="search-query">Twoje zapytanie:</label> | |
| <input type="text" id="search-query" placeholder="Wprowad藕 temat wyszukiwania..." required> | |
| </div> | |
| <button type="submit" class="btn-primary">Wyszukaj</button> | |
| </form> | |
| <div id="search-results" class="results-container hidden"></div> | |
| </div> | |
| <div id="scrape-tab" class="tab-pane"> | |
| <h3>Pobieranie tre艣ci ze strony</h3> | |
| <p>Podaj adres URL, a pobior臋 i wyczy艣c臋 tre艣膰 ze wskazanej strony.</p> | |
| <form id="scrape-form"> | |
| <div class="form-group"> | |
| <label for="scrape-url">Adres URL:</label> | |
| <input type="url" id="scrape-url" placeholder="https://przyklad.com/artykul" required> | |
| </div> | |
| <button type="submit" class="btn-primary">Pobierz tre艣膰</button> | |
| </form> | |
| <div id="scrape-results" class="results-container hidden"></div> | |
| </div> | |
| <div id="save-tab" class="tab-pane"> | |
| <h3>Zapisywanie tre艣ci do pliku</h3> | |
| <p>Wybierz format i zapisz pobrane tre艣ci.</p> | |
| <form id="save-form"> | |
| <div class="form-group"> | |
| <label for="save-content">Tre艣膰 do zapisania:</label> | |
| <textarea id="save-content" rows="6" placeholder="Wklej tutaj tre艣膰 do zapisania..." required></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="format-select">Wybierz format:</label> | |
| <select id="format-select"> | |
| <option value="md">Markdown (.md)</option> | |
| <option value="json">JSON (.json)</option> | |
| <option value="pdf">PDF (.pdf)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="filename">Nazwa pliku:</label> | |
| <input type="text" id="filename" placeholder="nazwa-pliku" required> | |
| </div> | |
| <button type="submit" class="btn-primary">Zapisz plik</button> | |
| </form> | |
| <div id="save-results" class="results-container hidden"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <section class="features"> | |
| <h2>Moje narz臋dzia</h2> | |
| <div class="feature-grid"> | |
| <div class="feature-card"> | |
| <h3>Wyszukiwanie WWW</h3> | |
| <p>Przeszukuj臋 internet na podstawie Twoich zapyta艅, priorytetyzuj膮c wiarygodne 藕r贸d艂a.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <h3>Scrapowanie tre艣ci</h3> | |
| <p>Pobieram i czyszcz臋 tre艣ci ze stron, usuwaj膮c reklamy, menu i elementy powtarzalne.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <h3>Zapisywanie plik贸w</h3> | |
| <p>Zapisuj臋 tre艣ci w wybranych formatach: Markdown, JSON lub PDF.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <p>Zaawansowany Asystent AI © 2023. Wszystkie prawa zastrze偶one.</p> | |
| </div> | |
| </footer> | |
| <script src="assets/js/script.js"></script> | |
| </body> | |
| </html> | |
| === assets/css/styles.css === | |
| /* Reset i podstawowe style */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| background-color: #f8f9fa; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Nag艂贸wek */ | |
| header { | |
| background: linear-gradient(135deg, #4a6fa5, #2a4e6c); | |
| color: white; | |
| padding: 2rem 0; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| header h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| header p { | |
| font-size: 1.1rem; | |
| opacity: 0.9; | |
| } | |
| /* Sekcja wprowadzenia */ | |
| .intro { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .intro h2 { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| color: #2a4e6c; | |
| } | |
| /* Zak艂adki */ | |
| .tabs { | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| margin-bottom: 3rem; | |
| } | |
| .tab-buttons { | |
| display: flex; | |
| border-bottom: 1px solid #e9ecef; | |
| } | |
| .tab-button { | |
| padding: 1rem 1.5rem; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| color: #6c757d; | |
| transition: all 0.3s ease; | |
| } | |
| .tab-button:hover { | |
| background-color: #f8f9fa; | |
| color: #4a6fa5; | |
| } | |
| .tab-button.active { | |
| color: #4a6fa5; | |
| border-bottom: 3px solid #4a6fa5; | |
| } | |
| .tab-content { | |
| padding: 2rem; | |
| } | |
| .tab-pane { | |
| display: none; | |
| } | |
| .tab-pane.active { | |
| display: block; | |
| } | |
| /* Formularze */ | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| input[type="text"], | |
| input[type="url"], | |
| textarea, | |
| select { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid #ced4da; | |
| border-radius: 4px; | |
| font-size: 1rem; | |
| transition: border-color 0.3s; | |
| } | |
| input[type="text"]:focus, | |
| input[type="url"]:focus, | |
| textarea:focus, | |
| select:focus { | |
| outline: none; | |
| border-color: #4a6fa5; | |
| box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.25); | |
| } | |
| textarea { | |
| resize: vertical; | |
| min-height: 120px; | |
| } | |
| /* Przyciski */ | |
| .btn-primary { | |
| background-color: #4a6fa5; | |
| color: white; | |
| border: none; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 4px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .btn-primary:hover { | |
| background-color: #3a5a80; | |
| } | |
| /* Wyniki */ | |
| .results-container { | |
| margin-top: 2rem; | |
| padding: 1.5rem; | |
| background-color: #f8f9fa; | |
| border-radius: 4px; | |
| border-left: 4px solid #4a6fa5; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .result-item { | |
| margin-bottom: 1rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid #e9ecef; | |
| } | |
| .result-item:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .result-title { | |
| font-weight: 600; | |
| color: #2a4e6c; | |
| margin-bottom: 0.25rem; | |
| } | |
| .result-url { | |
| color: #6c757d; | |
| font-size: 0.9rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .result-description { | |
| margin-bottom: 0.5rem; | |
| } | |
| /* Sekcja funkcji */ | |
| .features { | |
| margin-bottom: 3rem; | |
| } | |
| .features h2 { | |
| text-align: center; | |
| font-size: 2rem; | |
| margin-bottom: 2rem; | |
| color: #2a4e6c; | |
| } | |
| .feature-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .feature-card { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| text-align: center; | |
| transition: transform 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .feature-card h3 { | |
| color: #4a6fa5; | |
| margin-bottom: 1rem; | |
| } | |
| /* Stopka */ | |
| footer { | |
| background-color: #2a4e6c; | |
| color: white; | |
| text-align: center; | |
| padding: 1.5rem 0; | |
| margin-top: 3rem; | |
| } | |
| /* Responsywno艣膰 */ | |
| @media (max-width: 768px) { | |
| .tab-buttons { | |
| flex-direction: column; | |
| } | |
| .tab-button { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .feature-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| header h1 { | |
| font-size: 2rem; | |
| } | |
| } | |
| === assets/js/script.js === | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Obs艂uga zak艂adek | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| const tabPanes = document.querySelectorAll('.tab-pane'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const tabId = button.getAttribute('data-tab'); | |
| // Usu艅 aktywn膮 klas臋 ze wszystkich przycisk贸w i paneli | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| tabPanes.forEach(pane => pane.classList.remove('active')); | |
| // Dodaj aktywn膮 klas臋 do klikni臋tego przycisku i odpowiedniego panelu | |
| button.classList.add('active'); | |
| document.getElementById(`${tabId}-tab`).classList.add('active'); | |
| }); | |
| }); | |
| // Obs艂uga formularza wyszukiwania | |
| const searchForm = document.getElementById('search-form'); | |
| const searchResults = document.getElementById('search-results'); | |
| searchForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const query = document.getElementById('search-query').value.trim(); | |
| if (query) { | |
| // Symulacja wyszukiwania (w rzeczywisto艣ci po艂膮czy艂oby si臋 z API) | |
| simulateWebSearch(query); | |
| } | |
| }); | |
| // Obs艂uga formularza scrapowania | |
| const scrapeForm = document.getElementById('scrape-form'); | |
| const scrapeResults = document.getElementById('scrape-results'); | |
| scrapeForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const url = document.getElementById('scrape-url').value.trim(); | |
| if (url) { | |
| // Symulacja scrapowania (w rzeczywisto艣ci po艂膮czy艂oby si臋 z API) | |
| simulateWebScrape(url); | |
| } | |
| }); | |
| // Obs艂uga formularza zapisywania | |
| const saveForm = document.getElementById('save-form'); | |
| const saveResults = document.getElementById('save-results'); | |
| saveForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const content = document.getElementById('save-content').value.trim(); | |
| const format = document.getElementById('format-select').value; | |
| const filename = document.getElementById('filename').value.trim(); | |
| if (content && filename) { | |
| // Symulacja zapisywania (w rzeczywisto艣ci po艂膮czy艂oby si臋 z API) | |
| simulateSaveFile(content, format, filename); | |
| } | |
| }); | |
| // Funkcje symuluj膮ce dzia艂anie API | |
| function simulateWebSearch(query) { | |
| searchResults.innerHTML = '<p class="loading">Wyszukiwanie... (symulacja)</p>'; | |
| searchResults.classList.remove('hidden'); | |
| // Symulacja op贸藕nienia zapytania | |
| setTimeout(() => { | |
| const results = [ | |
| { | |
| title: 'Wynik wyszukiwania 1 dla: ' + query, | |
| url: 'https://przyklad.com/wynik-1', | |
| description: 'To jest przyk艂adowy opis wyniku wyszukiwania. Zawiera istotne informacje na temat zapytania.' | |
| }, | |
| { | |
| title: 'Wynik wyszukiwania 2 dla: ' + query, | |
| url: 'https://przyklad.com/wynik-2', | |
| description: 'Kolejny przyk艂adowy wynik wyszukiwania z odpowiednimi informacjami.' | |
| }, | |
| { | |
| title: 'Wynik wyszukiwania 3 dla: ' + query, | |
| url: 'https://przyklad.com/wynik-3', | |
| description: 'Trzeci przyk艂adowy wynik zawieraj膮cy warto艣ciowe tre艣ci zwi膮zane z zapytaniem.' | |
| } | |
| ]; | |
| displaySearchResults(results); | |
| }, 1500); | |
| } | |
| function displaySearchResults(results) { | |
| let html = '<h3>Wyniki wyszukiwania:</h3>'; | |
| results.forEach(result => { | |
| html += ` | |
| <div class="result-item"> | |
| <div class="result-title">${result.title}</div> | |
| <div class="result-url">${result.url}</div> | |
| <div class="result-description">${result.description}</div> | |
| <button class="btn-primary scrape-from-result" data-url="${result.url}">Pobierz tre艣膰</button> | |
| </div> | |
| `; | |
| }); | |
| searchResults.innerHTML = html; | |
| // Dodanie obs艂ugi przycisk贸w do scrapowania z wynik贸w | |
| document.querySelectorAll('.scrape-from-result').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const url = this.getAttribute('data-url'); | |
| document.getElementById('scrape-url').value = url; | |
| // Prze艂膮czenie na zak艂adk臋 scrapowania | |
| document.querySelector('[data-tab="scrape"]').click(); | |
| // Automatyczne uruchomienie scrapowania | |
| simulateWebScrape(url); | |
| }); | |
| }); | |
| } | |
| function simulateWebScrape(url) { | |
| scrapeResults.innerHTML = '<p class="loading">Pobieranie tre艣ci... (symulacja)</p>'; | |
| scrapeResults.classList.remove('hidden'); | |
| // Symulacja op贸藕nienia scrapowania | |
| setTimeout(() => { | |
| const content = ` | |
| <h3>Przyk艂adowa tre艣膰 pobrana z: ${url}</h3> | |
| <p>To jest symulowana tre艣膰 artyku艂u pobrana ze wskazanej strony internetowej. W rzeczywistym scenariuszu ta tre艣膰 zosta艂aby pobrana, wyczyszczona z element贸w takich jak reklamy, menu nawigacyjne i komentarze.</p> | |
| <p>Tre艣膰 zosta艂a przetworzona w celu zachowania tylko istotnych informacji z artyku艂u, zgodnie z zasadami robots.txt i warunkami serwisu.</p> | |
| <div class="actions"> | |
| <button class="btn-primary save-scraped-content" data-content="Przyk艂adowa tre艣膰 pobrana z: ${url}">Zapisz t臋 tre艣膰</button> | |
| </div> | |
| `; | |
| scrapeResults.innerHTML = content; | |
| // Dodanie obs艂ugi przycisku zapisywania | |
| document.querySelector('.save-scraped-content').addEventListener('click', function() { | |
| const content = this.getAttribute('data-content'); | |
| document.getElementById('save-content').value = content; | |
| // Prze艂膮czenie na zak艂adk臋 zapisywania | |
| document.querySelector('[data-tab="save"]').click(); | |
| }); | |
| }, 2000); | |
| } | |
| function simulateSaveFile(content, format, filename) { | |
| saveResults.innerHTML = '<p class="loading">Zapisywanie pliku... (symulacja)</p>'; | |
| saveResults.classList.remove('hidden'); | |
| // Symulacja op贸藕nienia zapisywania | |
| setTimeout(() => { | |
| const fullFilename = `${filename}.${format}`; | |
| saveResults.innerHTML = ` | |
| <div class="success-message"> | |
| <h3>Plik zosta艂 zapisany!</h3> | |
| <p>Tre艣膰 zosta艂a pomy艣lnie zapisana jako <strong>${fullFilename}</strong></p> | |
| <p>W rzeczywistym scenariuszu plik zosta艂by pobrany na Tw贸j komputer.</p> | |
| </div> | |
| `; | |
| // Reset formularza | |
| document.getElementById('save-form').reset(); | |
| }, 1500); | |
| } | |
| }); |