light-demo-53 / index.html
DiabeloDEV's picture
Upload folder using huggingface_hub
fea165d verified
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poradnik: Jak uruchomić GLM-4.6 - Kompletny przewodnik</title>
<meta name="description" content="Kompletny poradnik krok po kroku jak uruchomić model AI GLM-4.6. Instalacja, konfiguracja i pierwsze kroki.">
<meta name="keywords" content="GLM-4.6, AI, sztuczna inteligencja, model językowy, poradnik, tutorial">
<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">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header class="header">
<nav class="nav">
<div class="nav-brand">
<h1>GLM-4.6 Guide</h1>
</div>
<div class="nav-menu">
<a href="#wymagania">Wymagania</a>
<a href="#instalacja">Instalacja</a>
<a href="#konfiguracja">Konfiguracja</a>
<a href="#przyklady">Przykłady</a>
<a href="#faq">FAQ</a>
</div>
<button class="mobile-menu-toggle"></button>
</nav>
</header>
<main>
<section class="hero">
<div class="container">
<h1 class="hero-title">Poradnik: Jak uruchomić GLM-4.6</h1>
<p class="hero-subtitle">Kompletny przewodnik krok po kroku do instalacji i konfiguracji modelu AI GLM-4.6</p>
<div class="hero-cta">
<a href="#instalacja" class="btn btn-primary">Rozpocznij teraz</a>
<a href="#przyklady" class="btn btn-secondary">Zobacz przykłady</a>
</div>
</div>
</section>
<section class="features">
<div class="container">
<h2>Dlaczego GLM-4.6?</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>Wydajność</h3>
<p>Najnowszy model z niezwykłą szybkością przetwarzania i generowania odpowiedzi</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<h3>Precyzja</h3>
<p>Zaawansowane zrozumienie kontekstu i naturalnego języka</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔧</div>
<h3>Elastyczność</h3>
<p>Łatwa integracja z różnymi platformami i aplikacjami</p>
</div>
</div>
</div>
</section>
<section id="wymagania" class="section">
<div class="container">
<h2>Wymagania systemowe</h2>
<div class="requirements">
<div class="requirement-item">
<h3>🖥️ Sprzęt</h3>
<ul>
<li>Procesor: Intel i7 lub AMD Ryzen 7 lub nowszy</li>
<li>Pamięć RAM: Minimum 16GB (zalecane 32GB)</li>
<li>Karta graficzna: NVIDIA RTX 3060 lub nowszy (z 8GB VRAM)</li>
<li>Wolna przestrzeń dyskowa: Minimum 50GB</li>
</ul>
</div>
<div class="requirement-item">
<h3>💻 Oprogramowanie</h3>
<ul>
<li>Python 3.8 lub nowszy</li>
<li>pip (menedżer pakietów Python)</li>
<li>Git</li>
<li>Virtualenv (zalecane)</li>
</ul>
</div>
</div>
</div>
</section>
<section id="instalacja" class="section section-dark">
<div class="container">
<h2>Instalacja krok po kroku</h2>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h3>Przygotowanie środowiska</h3>
<div class="code-block">
<pre><code># Utwórz wirtualne środowisko
python -m venv glm46_env
# Aktywuj środowisko (Windows)
glm46_env\Scripts\activate
# Aktywuj środowisko (Linux/macOS)
source glm46_env/bin/activate</code></pre>
<button class="copy-btn" onclick="copyCode(this)">Kopiuj</button>
</div>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h3>Instalacja zależności</h3>
<div class="code-block">
<pre><code># Zainstaluj PyTorch z obsługą CUDA
pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118
# Zainstaluj transformers i inne zależności
pip install transformers>=4.36.0
pip install accelerate
pip install sentencepiece
pip install protobuf
pip install numpy
pip install pandas</code></pre>
<button class="copy-btn" onclick="copyCode(this)">Kopiuj</button>
</div>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h3>Pobranie modelu</h3>
<div class="code-block">
<pre><code>from transformers import AutoModel, AutoTokenizer
# Pobierz model i tokenizer
tokenizer = AutoTokenizer.from_pretrained("THUDM/glm-4-9b-chat", trust_remote_code=True)
model = AutoModel.from_pretrained(
"THUDM/glm-4-9b-chat",
trust_remote_code=True,
device_map="auto"
)</code></pre>
<button class="copy-btn" onclick="copyCode(this)">Kopiuj</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="konfiguracja" class="section">
<div class="container">
<h2>Konfiguracja</h2>
<div class="config-tabs">
<button class="tab-btn active" onclick="switchTab('basic')">Podstawowa</button>
<button class="tab-btn" onclick="switchTab('advanced')">Zaawansowana</button>
<button class="tab-btn" onclick="switchTab('api')">API Server</button>
</div>
<div class="tab-content active" id="basic-tab">
<h3>Podstawowa konfiguracja</h3>
<div class="code-block">
<pre><code># Proste użycie modelu
response, history = model.chat(
tokenizer,
"Witaj! Przedstaw się proszę.",
history=[]
)
print(response)</code></pre>
<button class="copy-btn" onclick="copyCode(this)">Kopiuj</button>
</div>
</div>
<div class="tab-content" id="advanced-tab">
<h3>Zaawansowana konfiguracja</h3>
<div class="code-block">
<pre><code># Konfiguracja parametrów generacji
model_kwargs = {
"max_length": 2048,
"temperature": 0.7,
"top_p": 0.9,
"repetition_penalty": 1.1,
"do_sample": True
}
response, history = model.chat(
tokenizer,
"Napisz poetycki opis zachodu słońca.",
history=[],
**model_kwargs
)</code></pre>
<button class="copy-btn" onclick="copyCode(this)">Kopiuj</button>
</div>
</div>
<div class="tab-content" id="api-tab">
<h3>Serwer API</h3>
<div class="code-block">
<pre><code># Uruchomienie serwera API
from flask import Flask, request, jsonify
import threading
app = Flask(__name__)
@app.route('/chat', methods=['POST'])
def chat():
data = request.json
message = data.get('message', '')
response, _ = model.chat(
tokenizer,
message,
history=[]
)
return jsonify({"response": response})
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)</code></pre>
<button class="copy-btn" onclick="copyCode(this)">Kopiuj</button>
</div>
</div>
</div>
</section>
<section id="przyklady" class="section section-dark">
<div class="container">
<h2>Przykłady użycia</h2>
<div class="examples-grid">
<div class="example-card">
<h3>📝 Generowanie tekstu</h3>
<p>Tworzenie artykułów, opisów produktów, treści marketingowych</p>
<button class="example-btn" onclick="showExample('text')">Zobacz kod</button>
</div>
<div class="example-card">
<h3>💬 Asystent konwersacyjny</h3>
<p>Obsługa klienta, pomoc techniczna, chatbot</p>
<button class="example-btn" onclick="showExample('chat')">Zobacz kod</button>
</div>
<div class="example-card">
<h3>🔍 Analiza tekstu</h3>
<p>Ekstrakcja informacji, podsumowania, analiza sentymentu</p>
<button class="example-btn" onclick="showExample('analysis')">Zobacz kod</button>
</div>
</div>
<div class="example-code" id="example-code" style="display: none;">
<div class="code-block">
<pre id="example-content"></pre>
<button class="copy-btn" onclick="copyExampleCode()">Kopiuj</button>
</div>
</div>
</div>
</section>
<section id="faq" class="section">
<div class="container">
<h2>Często zadawane pytania</h2>
<div class="faq">
<div class="faq-item">
<button class="faq-question" onclick="toggleFAQ(this)">
<span>Czy GLM-4.6 może działać bez karty graficznej?</span>
<span class="faq-toggle">+</span>
</button>
<div class="faq-answer">
<p>Tak, model może działać na CPU, ale wydajność będzie znacznie niższa. Czas odpowiedzi może wynosić od kilkudziesięciu sekund do kilku minut w zależności od sprzętu.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFAQ(this)">
<span>Ile pamięci RAM potrzebuje model?</span>
<span class="faq-toggle">+</span>
</button>
<div class="faq-answer">
<p>Minimum 16GB RAM, ale zalecane jest 32GB dla płynnego działania. Na mniejszej ilości pamięci może być potrzebne użycie trybu 8-bitowej precyzji.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFAQ(this)">
<span>Czy model obsługuje język polski?</span>
<span class="faq-toggle">+</span>
</button>
<div class="faq-answer">
<p>Tak, GLM-4.6 dobrze radzi sobie z językiem polskim. Model został trenowany na wielojęzycznych danych, w tym na polskich tekstach.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFAQ(this)">
<span>Jak zoptymalizować wydajność modelu?</span>
<span class="faq-toggle">+</span>
</button>
<div class="faq-answer">
<p>Można użyć kwantyzacji (4-bit lub 8-bit), batch processing, oraz optymalizacji pamięci poprzez gradient checkpointing.</p>
</div>
</div>
</div>
</div>
</section>
<section class="section section-dark">
<div class="container">
<div class="cta-box">
<h2>Gotowy do rozpoczęcia?</h2>
<p>Postępuj zgodnie z naszym przewodnikiem i uruchom GLM-4.6 już dziś!</p>
<div class="cta-buttons">
<a href="#instalacja" class="btn btn-primary btn-large">Zacznij instalację</a>
<a href="https://github.com/THUDM/GLM-4" target="_blank" class="btn btn-secondary btn-large">Dokumentacja oficjalna</a>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>GLM-4.6 Guide</h3>
<p>Kompletny przewodnik po instalacji i konfiguracji modelu GLM-4.6</p>
</div>
<div class="footer-section">
<h3>Linki</h3>
<ul>
<li><a href="#wymagania">Wymagania</a></li>
<li><a href="#instalacja">Instalacja</a></li>
<li><a href="#konfiguracja">Konfiguracja</a></li>
<li><a href="#przyklady">Przykłady</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Zasoby</h3>
<ul>
<li><a href="https://github.com/THUDM/GLM-4" target="_blank">GitHub</a></li>
<li><a href="https://huggingface.co/THUDM" target="_blank">Hugging Face</a></li>
<li><a href="https://open.bigmodel.cn/" target="_blank">Zhipu AI</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 GLM-4.6 Guide. Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
</div>
</div>
</footer>
<script src="assets/js/script.js"></script>
</body>
</html>