Merge pull request #84 from otjamin/dev

Project submission

Author: otjamin

README.md

@@ -1,5 +1,49 @@
 # GetDressed
 
+## Erste Schritte
+
+Es gibt verschiedene Möglichkeiten die App zu testen. Um es einfach zu machen haben wir eine `compose.yaml` erstellt, die alle benötigten Dienste enthält und eine kurze Schritt für Schritt Anleitung verfasst.
+
+Als erstes installiere dir Docker und Node.js, falls noch nicht geschehen.
+
+Dann kannst du das Repository herunterladen oder klonen.
+
+### Backend
+
+#### Ohne Ollama (lokale Installation)
+
+Installiere zuerst [Ollama](https://ollama.com/download) und lade `gemma3` als Modell.
+
+```bash
+ollama pull gemma3
+```
+
+Jetzt kannst du das Backend starten.
+
+```bash
+docker compose up
+```
+
+Damit Ollama aus den Containern erreichbar ist, musst du es mit `OLLAMA_HOST=0.0.0.0` starten.
+
+#### Mit Ollama (benötigt NVIDIA Container Toolkit)
+
+```
+docker compose -f compose.yaml -f compose.ollama.yaml up
+```
+
+### App
+
+Wechsle in den mobile Ordner und installiere mit `npm install` alle Abhängigkeiten.
+
+Bevor du die App starten kannst, musst du in der .env Datei die richtige IP eintragen. Wenn du die App an deinem Smartphone testen möchtest musst du die IP von deinem Computer nehmen. Für den Android Emulator musst du `10.0.2.2` eintragen.
+
+Jetzt kannst du die App starten und ausprobieren.
+
+```bash
+npx expo start
+```
+
 ## Agents
 
 Alle Agenten werden mit CrewAI erstellt.
@@ -15,16 +59,6 @@ Du kannst die Agents auch einzeln testen. Dafür solltest du Ollama installiert
 
 Mit `uv run my_crew` lässt sich dieser ausführen.
 
-## Erste Schritte
-
-Zum Starten des Servers wird **Docker** oder **Podman** benötigt. Alle benötigten Dienste sind in einer zentralen `compose.yaml` definiert, sodass das gesamte System mit nur einem Befehl gestartet werden kann:
-
-```bash
-docker compose up
-```
-
-Die Expo App muss separat gestartet werden. Navigiere dazu in das entsprechende Verzeichnis und starte sie.
-
 ## Mitmachen
 
 Du möchtest mit an diesem Projekt arbeiten? Wir haben das wichtigste zusammengeschrieben um dir den Einstieg so einfach wie möglich zu machen.

compose.yaml

@@ -4,7 +4,7 @@ services:
   api:
     build: ./server
     environment:
-      - MODEL=ollama/gemma3:12b
+      - MODEL=ollama/gemma3
       - API_BASE=http://host.docker.internal:11434
       - PB_URL=http://pb:8080
     ports:

mobile/.env

@@ -1,2 +1,2 @@
-EXPO_PUBLIC_API_URL=http://h46.finsterwiese.de:8000
-EXPO_PUBLIC_PB_URL=http://h46.finsterwiese.de:8090
+EXPO_PUBLIC_API_URL=http://localhost:8000
+EXPO_PUBLIC_PB_URL=http://localhost:8090

mobile/app/(tabs)/index.tsx

@@ -4,7 +4,6 @@ import {
   Text,
   View,
   FlatList,
-  SafeAreaView,
   TouchableOpacity,
   Image,
   Vibration,
@@ -23,6 +22,7 @@ import EditLookbookModal from '@/components/EditLookbookModal';
 import { pb } from '@/utils/pocketbase';
 import 'react-native-get-random-values';
 import { generateTags } from '@/utils/wardrobeApi';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export type WardrobeItem = {
   id: string;

mobile/app/(tabs)/quiz/index.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { SafeAreaView, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { useRouter } from 'expo-router';
 import { questions } from '@/utils/questions';
 import QuestionCard from '@/components/QuestionCard';
 import { useQuiz } from '@/ctx/Quiz';
 import SectionHeader from '@/components/SectionHeader';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function QuizScreen() {
   const [started, setStarted] = useState(false);

mobile/app/(tabs)/quiz/result.tsx

@@ -1,4 +1,4 @@
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Share } from 'react-native';
 import { useRouter } from 'expo-router';
 import { useQuiz } from '@/ctx/Quiz';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -50,6 +50,17 @@ export default function ResultScreen() {
     router.replace('/(tabs)/quiz'); // zurück zur ersten Frage
   };
 
+  const handleShare = async () => {
+    try {
+      const shareMessage = `Mein Style-Profil:\n\n${summary}\n\nMach jetzt auch das Style-Quiz und finde deinen Look!`;
+      await Share.share({
+        message: shareMessage,
+      });
+    } catch (error) {
+      console.error('Fehler beim Teilen:', error);
+    }
+  };
+
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Dein Style-Profil</Text>
@@ -66,6 +77,12 @@ export default function ResultScreen() {
       <TouchableOpacity style={styles.button} onPress={handleRestart}>
         <Text style={styles.buttonText}>Quiz neu starten</Text>
       </TouchableOpacity>
+
+      {summary && (
+        <TouchableOpacity style={styles.button} onPress={handleShare}>
+          <Text style={styles.buttonText}>Ergebnis teilen</Text>
+        </TouchableOpacity>
+      )}
     </View>
   );
 }
@@ -90,4 +107,11 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     paddingHorizontal: 10,
   },
+  shareButton: {
+    marginTop: 20,
+    backgroundColor: '#555',
+    padding: 14,
+    borderRadius: 12,
+    alignSelf: 'center',
+  },
 });

mobile/app/(tabs)/trends/index.tsx

@@ -2,9 +2,23 @@ import CustomSafeAreaView from '@/components/CustomSafeAreaView';
 import SectionHeader from '@/components/SectionHeader';
 import TrendList from '@/components/TrendList';
 import TrendPrompt from '@/components/TrendPrompt';
+import { fetchTrends, Trend } from '@/utils/trendApi';
+import { useCallback, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 export default function TrendScout() {
+  const [trends, setTrends] = useState<Trend[]>([]);
+
+  const getTrends = useCallback(async () => {
+    fetchTrends()
+      .then((fetchedTrends) => {
+        setTrends(fetchedTrends);
+      })
+      .catch((error) => {
+        console.error('Error fetching trends:', error);
+      });
+  }, []);
+
   return (
     <CustomSafeAreaView style={styles.container}>
       <SectionHeader title="Trend-Scout" />
@@ -14,11 +28,11 @@ export default function TrendScout() {
           Wonach suchst du gerade? Erhalte Antworten basierend auf aktuellen Daten aus Social Media,
           Online-Shops & Style-Blogs.
         </Text>
-        <TrendPrompt />
+        <TrendPrompt getTrends={getTrends} />
       </View>
       <View style={styles.trendsContainer}>
         <Text style={styles.title}>Aktuelle Trends</Text>
-        <TrendList />
+        <TrendList trends={trends} getTrends={getTrends} />
       </View>
     </CustomSafeAreaView>
   );

mobile/components/TrendList.tsx

@@ -1,31 +1,25 @@
 import { FlatList, RefreshControl, View } from 'react-native';
 import TrendListItem from './TrendListItem';
 import { useCallback, useEffect, useState } from 'react';
-import { fetchTrends, Trend } from '@/utils/trendApi';
+import { Trend } from '@/utils/trendApi';
 
-export default function TrendList() {
-  const [trends, setTrends] = useState<Trend[]>([]);
-  const [refreshing, setRefreshing] = useState(false);
+interface TrendListProps {
+  trends: Trend[];
+  getTrends: () => Promise<void>;
+}
 
-  const getTrends = async () => {
-    fetchTrends()
-      .then((fetchedTrends) => {
-        setTrends(fetchedTrends);
-      })
-      .catch((error) => {
-        console.error('Error fetching trends:', error);
-      });
-  };
+export default function TrendList({ trends, getTrends }: TrendListProps) {
+  const [refreshing, setRefreshing] = useState(false);
 
   useEffect(() => {
     getTrends();
-  }, []);
+  }, [getTrends]);
 
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
     await getTrends();
     setRefreshing(false);
-  }, []);
+  }, [getTrends]);
 
   return (
     <View style={{ flex: 1 }}>

mobile/components/TrendPrompt.tsx

@@ -11,7 +11,11 @@ import {
   View,
 } from 'react-native';
 
-export default function TrendPrompt() {
+interface TrendPromptProps {
+  getTrends: () => Promise<void>;
+}
+
+export default function TrendPrompt({ getTrends }: TrendPromptProps) {
   const [prompt, setPrompt] = useState<string>('');
   const [isThinking, setIsThinking] = useState<boolean>(false);
   const rotateValue = useAnimatedValue(0);
@@ -53,14 +57,13 @@ export default function TrendPrompt() {
   const handleSubmit = async () => {
     setIsThinking(true);
 
-    await generateTrends(prompt).then((trends) => {
-      console.log('Generated Trends:', trends);
+    const trends = await generateTrends(prompt);
+    console.log('Generated Trends:', trends);
 
-      saveTrends(trends); // Save trends to db
-    });
+    await saveTrends(trends); // Save trends to db
+    getTrends(); // Refresh the trends list
 
     setPrompt(''); // Clear the input after submission
-
     setIsThinking(false);
   };
 

ollama.Dockerfile

@@ -1,4 +1,4 @@
 FROM ollama/ollama:0.9.4
-ARG MODELS="gemma3:12b"
+ARG MODELS="gemma3"
 ENV OLLAMA_KEEP_ALIVE=24h
 RUN ollama serve & server=$! ; sleep 5 ; for m in $MODELS ; do ollama pull $m ; done ; kill $server