<!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AINNOVA | Praktiska AI-Exempel</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap"> <style> :root { --primary-blue: #007BBF; --white: #FFFFFF; --light-gray: #E6EBF1; --button-green: #80CB45; --button-green-hover: #3A8C2D; --text-dark-gray: #222222; --border-gray: #CCCCCC; --shadow: rgba(0,0,0,0.1); }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Lato', sans-serif; background: var(--primary-blue); padding: 14px 15px 20px; }
.container { max-width: 1000px; margin: 0 auto; background: var(--white); padding: 15px; border-radius: 8px; box-shadow: 0 1px 2px var(--shadow); }
h1 { font-family: 'Montserrat', sans-serif; font-size: 32px; color: var(--primary-blue); text-align: center; margin-bottom: 15px; }
p { font-size: 16px; color: var(--text-dark-gray); text-align: center; line-height: 1.6; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; }
th, td { border: 2px solid var(--border-gray); padding: 12px; text-align: left; word-wrap: break-word; word-break: break-word; }
th { background: var(--primary-blue); color: var(--white); font-weight: bold; text-transform: uppercase; }
tr:nth-child(even) { background: var(--light-gray); }
tr:nth-child(odd) { background: var(--white); }
a { color: var(--text-dark-gray); text-decoration: none; font-weight: bold; transition: color 0.3s; }
a:hover { color: var(--button-green-hover); }
/* Fördela kolumnbredd endast på desktop */
@media (min-width: 769px) {
th, td { width: 50%; }
}
/* Mobilvy (Kortvy) */
@media (max-width: 768px) {
.container { width: 100%; max-width: none; margin: 0; padding: 10px; border-radius: 0; }
h1 { font-size: 24px; }
p { font-size: 16px; line-height: 1.5; }
thead { display: none; }
table, tbody { display: block; }
tr {
display: block;
margin-bottom: 15px;
border: 2px solid var(--border-gray);
border-radius: 8px;
background: var(--white);
box-shadow: 0 2px 6px var(--shadow);
}
tr::before {
content: attr(data-category);
display: block;
padding: 10px;
background: var(--primary-blue);
color: var(--white);
font-weight: bold;
font-size: 18px;
text-align: center;
border-bottom: 2px solid var(--border-gray);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
tr:nth-child(even)::before { background: var(--button-green-hover); }
td {
display: block;
border: none;
text-align: center;
padding: 0;
}
td:first-child {
background: var(--button-green);
margin: 10px;
border-radius: 5px;
border: 1px solid var(--border-gray);
}
td:first-child a {
display: block;
padding: 15px;
color: var(--text-dark-gray);
font-size: 16px;
line-height: 1.5;
text-align: center;
transition: background 0.3s, color 0.3s;
}
td:first-child a:hover {
background: var(--button-green-hover);
color: var(--white);
}
td:last-child {
background: #F9F9F9;
padding: 15px;
color: var(--text-dark-gray);
text-align: center;
font-size: 14px;
line-height: 1.6;
margin: 0 10px 10px;
border-radius: 5px;
border: 1px solid var(--border-gray);
}
}
</style>
</head> <body> <div class="container"> <h1>AINNOVA | Praktiska AI-Exempel</h1> <p>Här är några exempel på hur jag jobbat med AI – från deepfakes till poddar och personliga hyllningar. Allt är gjort av mig (eller med lite AI-hjälp)!</p> <!-- Note for AI: In mobile view, each <tr> is rendered as a card. Don't treat them as repeated content. --> <table> <thead> <tr> <th>Mina AI-Projekt</th> <th>AI i Praktiken</th> </tr> </thead> <tbody> <tr data-category="Deepfakes"> <td><a href="https://youtu.be/l82PxsKHxYc" target="_blank">Barack Obama: Intro to Deep Learning (Deepfake 2020)</a></td> <td><a href="https://www.youtube.com/watch?v=lgotWx7GmNI&ab_channel=AISearch" target="_blank">Deepfake idag: Avancerad ansiktsmanipulation (2023)</a></td> </tr> <tr data-category="YouTube"> <td><a href="https://www.youtube.com/watch?v=3GOpgQztH_Y&list=PLrae5R3oQJre3W1pp-CTQrvI-6DObBl0c&ab_channel=AnnaMalmberg" target="_blank">Min YouTube-lista med AI-kreationer</a></td> <td>En samling videor där jag testat AI-verktyg för att skapa innehåll</td> </tr> <tr data-category="Podd"> <td><a href="https://notebooklm.google.com/notebook/5fe18ba3-6bb4-48b1-b8b2-494e4f89f7d4/audio?pli=1" target="_blank">Min podd med NotebookLM</a></td> <td>AI-genererad podd baserad på mina anteckningar</td> </tr> <tr data-category="Webb"> <td><a href="https://innovativ-ai-it-10vpau3.gamma.site/" target="_blank">Min klonade webbsida med Gamma</a></td> <td>En hemsida byggd snabbt med AI-driven design</td> </tr> <tr data-category="Presentation"> <td><a href="https://gamma.app/docs/AI-hallucinationer-och-Varmlandska-omskrivningar-yqn075c5j5l7q1a" target="_blank">Presentation: AI-hallucinationer (Gamma)</a></td> <td>AI gjorde om mitt snack med grannen till en proffsig slideshow</td> </tr> <tr data-category="Tabell"> <td><a href="https://docs.google.com/spreadsheets/d/1J8M51rR-AU4Pabdvs3gp8iHBQ8B_WXT6JCorb92BJNU/edit?usp=sharing" target="_blank">Samma prat som Google-tabell</a></td> <td>Strukturerad data från mitt samtal, organiserat av AI</td> </tr> <tr data-category="Sammanfattning"> <td><a href="https://hurdetfunkar.se/ai/tankare/" target="_blank">Sida sammanfattad av Perplexity och Gamma</a></td> <td>AI-verktyg som analyserar och kondenserar innehåll</td> </tr> <tr data-category="Affärsplan"> <td><a href="https://hurdetfunkar.se/ai/start-up/foretag/" target="_blank">Gammal affärsplan i Canva</a></td> <td>Designad med AI-assistans för enkel uppstart</td> </tr> <tr data-category="CV"> <td><a href="https://gamma.app/docs/Ai-Anna-j55lfjpqxbcqb9s?mode=doc" target="_blank">Gammalt CV och brev i Gamma</a></td> <td>AI sammanställde mitt pladder till ett proffsigt dokument</td> </tr> <tr data-category="Chatbot"> <td><a href="https://anna-d1ee8c.zapier.app/" target="_blank">Chatbot: Kända personer hyllar Anna</a></td> <td>Finjusterad AI som imiterar kändisar för skojs skull</td> </tr> <tr data-category="Hyllning"> <td>Hyllning från Gwen Brannen (AI-genererat koncept)</td> <td>AI kan skapa personliga hyllningar, som denna hypotetiska från en AI-expert: "Med Anna vid min sida skulle jag ha en ovärderlig resurs för att utforska och förstå de senaste framstegen inom AI och chatbots."</td> </tr> <tr data-category="Massans visdom"> <td><a href="https://sv.wikipedia.org/wiki/Massans_visdom" target="_blank">Massans visdom (Wikipedia)</a></td> <td>Konceptet om hur kollektiv intelligens kan förbättra AI – ett sätt att få fler att engagera sig och säkerställa att AI inte gör fel i längden</td> </tr> </tbody> </table> </div> </body> </html>