Spaces:

OjciecTadeusz
/

anycoder-dev

Sleeping

File size: 17,204 Bytes

7cf60a8

# 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 &copy; 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);
    }
});