Add support for type-hinting (PEP-561) #111
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Author
|
cc: @aymeric-roucher |
Collaborator
|
Closing this since as per my message here, we don't want to enforce PEP-561. |
Closed
edmilsoneddy01-lang
added a commit
to edmilsoneddy01-lang/beyond-python-smolagents
that referenced
this pull request
Oct 25, 2025
import React, { useState, useEffect } from "react";
// 1000SONS - Single-file React app (App.jsx) // Updated features: // - Downloads for listeners and artists (.mp3, .m4a, .mp4) // - Each download increments an internal admin earning of 50 Kz (stored in localStorage) — NOT displayed publicly // - Artist payment required before upload; access is released immediately after simulated payment // - LocalStorage-backed prototype (replace with secure backend and real payment integration in production)
export default function App() { // Views: home, artists, artist-register, artist-login, payment, upload, dashboard const [view, setView] = useState("home");
const [artists, setArtists] = useState(() => JSON.parse(localStorage.getItem("1000sons_artists")) || []); const [uploads, setUploads] = useState(() => JSON.parse(localStorage.getItem("1000sons_uploads")) || []); const [user, setUser] = useState(() => JSON.parse(localStorage.getItem("1000sons_user")) || null); const [current, setCurrent] = useState(() => (JSON.parse(localStorage.getItem("1000sons_uploads")) || [])[0] || null);
// Admin earnings stored privately in localStorage key '1000sons_admin_earnings' (number, in Kz) const [adminEarnings, setAdminEarnings] = useState(() => Number(localStorage.getItem("1000sons_admin_earnings") || 0));
useEffect(() => localStorage.setItem("1000sons_artists", JSON.stringify(artists)), [artists]); useEffect(() => localStorage.setItem("1000sons_uploads", JSON.stringify(uploads)), [uploads]); useEffect(() => localStorage.setItem("1000sons_user", JSON.stringify(user)), [user]); useEffect(() => localStorage.setItem("1000sons_admin_earnings", String(adminEarnings)), [adminEarnings]);
useEffect(() => { if (!current && uploads.length) setCurrent(uploads[0]); }, [uploads]);
// --- Artist / Auth logic (prototype) --- function registerArtist({ name, email, password }) { if (artists.find((a) => a.email === email)) return alert("Email já registado."); const newArtist = { id: Date.now(), name, email, password, paid: false, payments: [], uploads: [] }; setArtists((s) => [newArtist, ...s]); const u = { role: "artist", id: newArtist.id, name: newArtist.name, email: newArtist.email }; setUser(u); setView("payment"); }
function loginArtist({ email, password }) { const a = artists.find((x) => x.email === email && x.password === password); if (!a) return alert("Credenciais inválidas."); setUser({ role: "artist", id: a.id, name: a.name, email: a.email }); setView("dashboard"); }
function logout() { setUser(null); setView("home"); }
// Simulated payment — immediate access granted when >= 500 Kz function confirmPayment({ method, amount }) { if (!user || user.role !== "artist") return alert("Deves estar logado como artista para pagar."); if (amount < 500) return alert("Pagamento mínimo: 500 Kz."); setArtists((list) => list.map((a) => { if (a.id === user.id) { const payment = { id: Date.now(), method, amount, date: new Date().toISOString() }; a.payments = [payment, ...(a.payments || [])]; a.paid = true; // immediate } return a; }) ); alert("Pagamento confirmado (simulação). Acesso liberado imediatamente."); setView("upload"); }
// Uploading content (artists only, requires paid status) function submitUpload({ title, type, link }) { if (!user || user.role !== "artist") return alert("Deves entrar como artista para enviar."); const artist = artists.find((a) => a.id === user.id); if (!artist || !artist.paid) return alert("Pagamento necessário antes de enviar."); const item = { id: Date.now(), artistId: artist.id, artistName: artist.name, title, type, // 'audio' | 'video' | 'both' link, date: new Date().toISOString(), downloads: 0, approved: true, // immediate publish }; setUploads((u) => [item, ...u]); // update artist's upload list setArtists((list) => list.map((a) => (a.id === artist.id ? { ...a, uploads: [item, ...(a.uploads || [])] } : a))); alert("Conteúdo enviado e publicado (protótipo)."); setView("dashboard"); }
// Download handler: increments upload.downloads and internal admin earnings by 50 Kz function handleDownload(item) { // For demo: increment earnings and downloads locally setUploads((list) => list.map((u) => { if (u.id === item.id) { return { ...u, downloads: (u.downloads || 0) + 1 }; } return u; }) ); setAdminEarnings((prev) => prev + 50); // Note: we intentionally do NOT show admin earnings on the public UI. console.log("Download registado (interno). Total admin (Kz):", adminEarnings + 50); }
// --- UI Components --- function Header() { return ( <header style={styles.header}> <div style={{ display: "flex", alignItems: "center", gap: 12 }}> <div style={styles.logo}>1K</div> <div> <h1 style={{ margin: 0 }}>1000SONS</h1> <div style={{ fontSize: 12, color: "#cbd5e1" }}>Onde o som encontra o mundo.</div> </div> </div> <nav style={{ display: "flex", gap: 8, alignItems: "center" }}> <button style={styles.btn} onClick={() => setView("home")}>Home</button> <button style={styles.btn} onClick={() => setView("artists")}>Artistas</button> {!user ? ( <> <button style={styles.btn} onClick={() => setView("artist-login")}>Entrar (Artista)</button> <button style={styles.btnPrimary} onClick={() => setView("artist-register")}>Registar (Artista)</button> </> ) : ( <div style={{ display: "flex", gap: 8, alignItems: "center" }}> <span style={{ fontSize: 14 }}>Olá, {user.name}</span> <button style={styles.btn} onClick={() => setView("dashboard")}>Painel</button> <button style={styles.btnOutline} onClick={logout}>Sair</button> </div> )} </nav> </header> ); }
function Home() { return ( <main style={styles.container}> <section style={{ marginBottom: 20 }}> <h2>Destaques</h2> <div style={styles.grid}> {uploads.length === 0 && <div style={styles.card}>Sem uploads ainda. Regista-te como artista para divulgar.</div>} {uploads.map((u) => ( <div key={u.id} style={styles.card}> <div style={{ fontWeight: 600 }}>{u.title}</div> <div style={{ fontSize: 12, color: "#94a3b8" }}>{u.artistName} — {new Date(u.date).toLocaleDateString()}</div>
<div style={{ marginTop: 8 }}>
{u.type !== 'video' && (
<audio controls src={u.link || ""} style={{ width: "100%" }} />
)}
{u.type === 'video' && (
<video controls src={u.link || ""} style={{ width: "100%" }} />
)}
</div>
<div style={{ marginTop: 8, display: "flex", gap: 8, flexWrap: "wrap" }}>
{/* Download buttons (visible to everyone) */}
{u.type !== 'video' && (
<>
<a href={u.link} download={`${u.title}.mp3`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .mp3</a>
<a href={u.link} download={`${u.title}.m4a`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .m4a</a>
</>
)}
{u.type === 'video' && (
<a href={u.link} download={`${u.title}.mp4`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .mp4</a>
)}
</div>
</div>
))}
</div>
</section>
<section>
<h2>Player Rápido</h2>
<div style={styles.card}>
{current ? (
<div>
<div style={{ fontWeight: 600 }}>{current.title} <span style={{ fontSize: 12, color: "#94a3b8" }}>— {current.artistName}</span></div>
{current.type === 'video' ? (
<video controls style={{ width: "100%", marginTop: 8 }} src={current.link}></video>
) : (
<audio controls style={{ width: "100%", marginTop: 8 }} src={current.link}></audio>
)}
</div>
) : (
<div style={{ color: "#94a3b8" }}>Nenhum conteúdo para reproduzir.</div>
)}
</div>
</section>
</main>
);
}
function ArtistsList() { return ( <main style={styles.container}> <h2>Artistas</h2> <div style={styles.grid}> {artists.length === 0 && <div style={styles.card}>Ainda não há artistas registados.</div>} {artists.map((a) => ( <div key={a.id} style={styles.card}> <div style={{ display: "flex", gap: 12, alignItems: "center" }}> <div style={styles.avatar}>{a.name.charAt(0).toUpperCase()}</div> <div> <div style={{ fontWeight: 600 }}>{a.name}</div> <div style={{ fontSize: 12, color: "#94a3b8" }}>{a.email}</div> </div> </div> </div> ))} </div> </main> ); }
function ArtistRegister() { const [form, setForm] = useState({ name: "", email: "", password: "" }); return ( <div style={styles.container}> <h2>Registo de Artista</h2> <div style={styles.form}> <label>Nome</label> <input style={styles.input} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /> <label>Email</label> <input style={styles.input} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /> <label>Senha</label> <input type="password" style={styles.input} value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} /> <div style={{ display: "flex", gap: 8 }}> <button style={styles.btnPrimary} onClick={() => registerArtist(form)}>Registar e Pagar</button> <button style={styles.btn} onClick={() => setView("home")}>Cancelar</button> </div> </div> </div> ); }
function ArtistLogin() { const [form, setForm] = useState({ email: "", password: "" }); return ( <div style={styles.container}> <h2>Login de Artista</h2> <div style={styles.form}> <label>Email</label> <input style={styles.input} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /> <label>Senha</label> <input type="password" style={styles.input} value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} /> <div style={{ display: "flex", gap: 8 }}> <button style={styles.btnPrimary} onClick={() => loginArtist(form)}>Entrar</button> <button style={styles.btn} onClick={() => setView("home")}>Cancelar</button> </div> </div> </div> ); }
function PaymentView() { const [method, setMethod] = useState("express"); const [amount, setAmount] = useState(500);
function doPay() {
if (amount < 500) return alert("Pagamento mínimo: 500 Kz.");
confirmPayment({ method, amount });
}
return (
<div style={styles.container}>
<h2>Pagamento de Divulgação</h2>
<div style={styles.card}>
<div>Pagamento obrigatório antes do envio. Taxa mínima: <strong>500 Kz</strong>.</div>
<div style={{ marginTop: 8 }}>
<label>Método</label>
<select style={styles.input} value={method} onChange={(e) => setMethod(e.target.value)}>
<option value="express">Express (Visa/MasterCard)</option>
<option value="multicaixa">Multicaixa (Angola)</option>
<option value="paypal">PayPal</option>
</select>
</div>
<div style={{ marginTop: 8 }}>
<label>Valor (Kz)</label>
<input type="number" style={styles.input} value={amount} onChange={(e) => setAmount(Number(e.target.value))} />
</div>
<div style={{ display: "flex", gap: 8, marginTop: 8 }}>
<button style={styles.btnPrimary} onClick={doPay}>Pagar e Enviar</button>
<button style={styles.btn} onClick={() => setView("home")}>Cancelar</button>
</div>
<div style={{ marginTop: 12, fontSize: 12, color: "#94a3b8" }}>
Atenção: esta é uma simulação. Em produção integre PayPal, Multicaixa e um gateway de cartões seguro; valide pagamentos via webhooks.
</div>
</div>
</div>
);
}
function UploadForm() { const [form, setForm] = useState({ title: "", type: "audio", link: "" }); return ( <div style={styles.container}> <h2>Enviar Música / Videoclipe</h2> <div style={styles.form}> <label>Título</label> <input style={styles.input} value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /> <label>Tipo de Envio</label> <select style={styles.input} value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}> <option value="audio">Música</option> <option value="video">Videoclipe</option> <option value="both">Ambos</option> </select> <label>Link do ficheiro (YouTube, Drive, S3 ou URL direto)</label> <input style={styles.input} value={form.link} onChange={(e) => setForm({ ...form, link: e.target.value })} />
<div style={{ display: "flex", gap: 8, marginTop: 8 }}>
<button style={styles.btnPrimary} onClick={() => submitUpload(form)}>Enviar</button>
<button style={styles.btn} onClick={() => setView("dashboard")}>Cancelar</button>
</div>
</div>
</div>
);
}
function Dashboard() { if (!user) return <div style={styles.container}>Deves entrar como artista.</div>; const artist = artists.find((a) => a.id === user.id); if (!artist) return <div style={styles.container}>Artista não encontrado.</div>;
return (
<div style={styles.container}>
<h2>Painel do Artista</h2>
<div style={styles.card}>
<div style={{ fontWeight: 600 }}>{artist.name}</div>
<div style={{ fontSize: 12, color: "#94a3b8" }}>Email: {artist.email}</div>
<div style={{ marginTop: 8 }}>Status de pagamento: {artist.paid ? <span style={{ color: "#34d399" }}>Pago</span> : <span style={{ color: "#fbbf24" }}>Pendente</span>}</div>
</div>
{!artist.paid ? (
<div style={{ marginTop: 12 }}>
<div style={{ color: "#f59e0b" }}>Ainda não efectuaste o pagamento. Paga para poderes enviar a tua música/vídeo.</div>
<button style={{ ...styles.btnPrimary, marginTop: 8 }} onClick={() => setView("payment")} >Pagar Agora</button>
</div>
) : (
<div style={{ marginTop: 12 }}>
<button style={styles.btnPrimary} onClick={() => setView("upload")} >Enviar Música/Videoclipe</button>
</div>
)}
<div style={{ marginTop: 18 }}>
<h3>Meus Envios</h3>
<div style={{ display: "grid", gap: 8 }}>
{(uploads.filter((u) => u.artistId === artist.id).length === 0) && <div style={styles.card}>Nenhum envio ainda.</div>}
{uploads.filter((u) => u.artistId === artist.id).map((u) => (
<div key={u.id} style={styles.card}>
<div style={{ fontWeight: 600 }}>{u.title}</div>
<div style={{ fontSize: 12, color: "#94a3b8" }}>{u.type} — {new Date(u.date).toLocaleString()}</div>
<div style={{ marginTop: 8 }}>{u.link && <a href={u.link} target="_blank" rel="noreferrer">Ver ficheiro</a>}</div>
<div style={{ marginTop: 8 }}>Downloads: {u.downloads || 0}</div>
<div style={{ marginTop: 8, display: "flex", gap: 8 }}>
{u.type !== 'video' && (
<>
<a href={u.link} download={`${u.title}.mp3`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .mp3</a>
<a href={u.link} download={`${u.title}.m4a`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .m4a</a>
</>
)}
{u.type === 'video' && (
<a href={u.link} download={`${u.title}.mp4`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .mp4</a>
)}
</div>
</div>
))}
</div>
</div>
<div style={{ marginTop: 18 }}>
<h3>Histórico de Pagamentos</h3>
<div style={{ display: "grid", gap: 8 }}>
{(!artist.payments || artist.payments.length === 0) && <div style={styles.card}>Nenhum pagamento registado.</div>}
{(artist.payments || []).map((p) => (
<div key={p.id} style={styles.card}>Método: {p.method} — {p.amount} Kz — {new Date(p.date).toLocaleString()}</div>
))}
</div>
</div>
</div>
);
}
// Footer function Footer() { return ( <footer style={styles.footer}> © 1000SONS – Todos os direitos reservados. — Siga-nos: Instagram | YouTube | TikTok </footer> ); }
return ( <div style={{ minHeight: "100vh", background: "#000", color: "#fff", fontFamily: 'Inter, system-ui, -apple-system, sans-serif' }}> <Header /> {view === "home" && <Home />} {view === "artists" && <ArtistsList />} {view === "artist-register" && <ArtistRegister />} {view === "artist-login" && <ArtistLogin />} {view === "payment" && user && user.role === "artist" && <PaymentView />} {view === "upload" && user && user.role === "artist" && <UploadForm />} {view === "dashboard" && user && user.role === "artist" && <Dashboard />} <Footer /> </div> ); }
// --- Simple inline styles for the prototype --- const styles = { header: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: 16, background: "#000", borderBottom: "1px solid huggingface#111" }, logo: { width: 44, height: 44, borderRadius: 8, background: "linear-gradient(135deg,#06b6d4,#f59e0b)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }, btn: { padding: "8px 12px", borderRadius: 8, background: "#374151", color: "#fff", border: "none", cursor: "pointer" }, btnPrimary: { padding: "8px 12px", borderRadius: 8, background: "#0ea5e9", color: "#fff", border: "none", cursor: "pointer" }, btnOutline: { padding: "8px 12px", borderRadius: 8, background: "transparent", color: "#fff", border: "1px solid #374151", cursor: "pointer" }, container: { padding: 24, maxWidth: 1100, margin: "0 auto" }, grid: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16 }, card: { background: "#0f172a", padding: 16, borderRadius: 10, boxShadow: "0 6px 18px rgba(2,6,23,0.6)" }, avatar: { width: 44, height: 44, borderRadius: 999, background: "linear-gradient(135deg,#06b6d4,#f59e0b)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }, form: { display: "grid", gap: 8, maxWidth: 600 }, input: { padding: 10, borderRadius: 8, background: "#0b1220", border: "1px solid #1f2937", color: "#fff" }, footer: { padding: 16, textAlign: "center", background: "#071024", marginTop: 24 } };
const linkBtnStyle = { display: "inline-block", padding: "6px 10px", borderRadius: 8, background: "#111827", color: "#fff", textDecoration: "none", border: "1px solid #1f2937" };
// small helper to avoid repeating link button style object reference styles.linkBtn = linkBtnStyle;
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds support for type-hinting information for
smolagents, as laid in PEP-561.Closes #112
It requires adding an empty
py.typedfile.