Hugging Face Spaces bietet eine kostenfreie Möglichkeit, ein Portfolio mit interaktiven Demos zu hosten. In diesem Artikel wird Schritt für Schritt erläutert, wie Sie ein solches Portfolio einrichten können.
Hugging Face Spaces ist ein oft übersehenes Tool. Es ist kostenlos, einfach zu implementieren und eignet sich hervorragend für die Erstellung einer klaren persönlichen Webseite mit Live-Demos. Sie können es einfach halten oder interaktive Elemente hinzufügen, je nach Ihren Anforderungen. In diesem Artikel werden wir erläutern, was Hugging Face Spaces ist, warum es sich gut für Portfolios eignet und wie Sie Ihr eigenes Portfolio Schritt für Schritt bereitstellen können.
Was ist Hugging Face Spaces?
Hugging Face Spaces ist eine Plattform, die es ermöglicht, Webanwendungen direkt aus einem GitHub-Repository zu hosten, was die Bereitstellung auch für Anfänger einfach und zugänglich macht. Ursprünglich zur Präsentation von Machine-Learning-Demos konzipiert, hat sich die Plattform erheblich weiterentwickelt und unterstützt nun eine Vielzahl von Anwendungsfällen, darunter statische Webseiten, Python-basierte Anwendungen, interaktive Benutzeroberflächen und voll funktionsfähige KI-gesteuerte Demos. Sie können Spaces mit folgenden Technologien erstellen:
- Statisches HTML/CSS/JS
- Gradio (Python UI-Framework)
- Streamlit
Diese Flexibilität ist ein großer Vorteil für Portfolios. Lassen Sie uns Schritt für Schritt durch den Prozess gehen, wie Sie Ihr Portfolio kostenlos auf Hugging Face Spaces hosten können.
Schritt 1: Erstellen eines Hugging Face Kontos
Besuchen Sie Hugging Face und registrieren Sie sich.
Schritt 2: Vorbereitung Ihres Portfolios
Sie können eine der folgenden Methoden wählen:
- Option A: Statische Webseite (HTML/CSS/JS)
- Option B: Python-basiertes Portfolio (Gradio / Streamlit)
Die Struktur Ihres Ordners könnte wie folgt aussehen:
- portfolio/
- │── index.html
- │── style.css
- │── script.js
Für ein Python-basiertes Portfolio könnten die Dateien wie folgt aussehen:
- app.py
- requirements.txt
Schritt 3: Erstellen eines neuen Spaces
Klicken Sie auf Neuer Space. Dies öffnet die folgende Seite:
Wählen Sie:
- Besitzer: Ihr Benutzername
- Space-Name: z.B. mein-portfolio
- Lizenz: MIT (empfohlen)
Wählen Sie das SDK:
- Statisch für HTML-, CSS- und JS-Portfolios
- Gradio für interaktive Python-Portfolios
- Streamlit für Daten-Dashboards
Nachdem Sie alles ausgefüllt haben, klicken Sie auf Space erstellen.
Schritt 4: Hochladen oder Verbinden Ihres Codes
Sie können Dateien direkt hochladen oder eine Verbindung zu einem GitHub-Repository herstellen.
Für das Statische SDK laden Sie einfach index.html und die Assets hoch. Für Gradio oder Streamlit stellen Sie sicher, dass:
- app.py vorhanden ist
- requirements.txt die Abhängigkeiten auflistet
Hugging Face erstellt und veröffentlicht automatisch Ihren Space. Wenn ich beispielsweise Gradio ausgewählt habe, klicke ich auf die Erstellung der app.py-Datei:
Nach dieser Aktion öffnet sich die folgende Seite:
Ich werde die app.py-Datei wie folgt bearbeiten:
import gradio as gr
def contact_message(name, message):
return f"Danke {name}! Ihre Nachricht wurde erhalten 😊"
with gr.Blocks(title="Eishas Portfolio") as demo:
gr.Markdown(
"""
# 👋 Hallo, ich bin Kanwal
### AI / ML Enthusiast | Python-Entwickler
Willkommen in meinem Portfolio!
Ich genieße es, KI-gesteuerte Anwendungen und saubere Backend-Systeme zu entwickeln.
"""
)
gr.Markdown("## 🚀 Projekte")
gr.Markdown(
"""
**🔹 PDF Parser mit LangChain**
Individuelle PDF-Analyse mit Header-/Footer-Entfernung und LLM-Integration.
**🔹 Fallähnlichkeitsfinder (FYP)**
Findet ähnliche medizinische/rechtliche Fälle mithilfe von LLaMA-basierten Einbettungen.
**🔹 KI-Chatbot-Demo**
Konversationale KI, die mit Hugging Face-Modellen erstellt wurde.
"""
)
gr.Markdown("## Lebenslauf")
gr.Markdown(
"[Laden Sie meinen Lebenslauf herunter](https://example.com/resume.pdf)"
)
gr.Markdown("## Kontaktieren Sie mich")
name = gr.Textbox(label="Ihr Name")
message = gr.Textbox(label="Ihre Nachricht", lines=3)
output = gr.Textbox(label="Antwort")
submit = gr.Button("Nachricht senden")
submit.click(contact_message, inputs=[name, message], outputs=output)
gr.Markdown(
"""
---
🔗 **GitHub:** https://github.com/yourusername
🔗 **LinkedIn:** https://linkedin.com/in/yourprofile
"""
)
demo.launch()Nach der Bearbeitung der app.py-Datei klicken Sie auf Neue Datei in main committen.
Schritt 5: Ihr Portfolio ist online
Jetzt klicken Sie auf der gleichen Seite auf App, um Ihr Portfolio anzuzeigen.
Durch einen Klick können Sie Ihr Portfolio sehen:
Alternativ können Sie auch die URL https://
- Über mich Abschnitt
- Projekte mit Live-Demos
- Lebenslauf-Download
- Kontaktlinks
- GitHub und LinkedIn
Mit Gradio können Sie dies in ein interaktives Erlebnis verwandeln.
Tipps, um Ihr Portfolio hervorzuheben
- Fügen Sie Live-Demos hinzu:
- ML-Modelle
- Chatbots
- NLP-Tools
- Datenvisualisierungen
Halten Sie es leicht: Kostenlose Spaces haben Ressourcenlimits, optimieren Sie also die Assets.
Verwenden Sie eine saubere Benutzeroberfläche: Minimalistisches Design ist besser als auffällige Animationen.
Fügen Sie eine README.md hinzu: Ihre Space-Seite zeigt den Inhalt der README an, nutzen Sie dies weise.
Fazit
Hugging Face Spaces ist mehr als nur eine Demo-Plattform. Es ist eine kostenlose, moderne und leistungsstarke Hosting-Lösung für Portfolios. Wenn Ihre Arbeit Code, Daten oder KI umfasst, hebt sich das Hosting Ihres Portfolios auf Spaces sofort von traditionellen statischen Seiten ab. Ihr Portfolio sollte nicht nur zeigen, was Sie können, sondern es sollte live demonstriert werden.
KI Snack
