feat: basic api complete

basic grid layout

memory-game/mg-backend/ai.py

@@ -0,0 +1,61 @@
+from dotenv import load_dotenv
+import google.generativeai as genai
+import json
+import os
+from .photos import Pictures
+from pydantic import BaseModel, HttpUrl
+
+
+load_dotenv()
+GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
+
+
+class Topics(BaseModel):
+    topic: str
+
+
+class Results(BaseModel):
+    topic: str
+    medium_url: str
+    photo_id: int
+    photo_url: str
+    bad_match: bool
+
+
+class AI:
+    genai = genai.configure(api_key=GEMINI_API_KEY)
+
+    def generate_topics(self) -> list:
+        model = genai.GenerativeModel(
+            "gemini-1.5-flash",
+            generation_config={
+                "response_mime_type": "application/json",
+                "response_schema": list[Topics],
+            },
+        )
+
+        prompt = """
+          Return 12 items for a toddler aged 2 to 3 to choose from in a memory game. 
+          """
+        response = model.generate_content(prompt).text
+
+        return json.loads(response)
+
+    def generate_card_json(self, photo_payload, topic):
+        prompt = f"""
+        This JSON payload will need to be analayzed. Your job is to pick the alt field with the best match for the toddler matching game. return the properties of the object
+        {photo_payload} 
+        and the original topic is {topic}. If the alt text and topic are a bad match set the bad_match bool.
+        """
+
+        model = genai.GenerativeModel(
+            "gemini-1.5-flash",
+            generation_config={
+                "response_mime_type": "application/json",
+                "response_schema": Results,
+            },
+        )
+
+        r = model.generate_content(prompt).text
+
+        return json.loads(r)

memory-game/mg-backend/main.py

@@ -0,0 +1,53 @@
+from .ai import AI
+from .test_data import data
+from dotenv import load_dotenv
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+import logging
+import os
+from .photos import Pictures
+
+logger = logging.getLogger("uvicorn.error")
+logger.setLevel(logging.DEBUG)
+load_dotenv()
+
+app = FastAPI()
+ai = AI()
+
+# IN HERE FOR LOCAL DEV
+origins = ["http://localhost:5173"]
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+PEXELS_API_KEY = os.getenv("PEXELS_API_KEY")
+photos = Pictures(PEXELS_API_KEY)
+
+
+@app.get("/")
+async def read_main():
+    return data
+    # data = []
+    #
+    # topics = ai.generate_topics()
+    #
+    # try:
+    #     for item in topics:
+    #
+    #         logger.info(item)
+    #         picture_data = photos.search(item["topic"])
+    #
+    #         card_json = ai.generate_card_json(picture_data, item)
+    #         logger.info(card_json)
+    #
+    #         data.append(card_json)
+    #
+    #     return data
+    # except Exception as e:
+    #     logger.error(e)
+    #     return {"error": "uname to handle request"}

memory-game/mg-backend/photos.py

@@ -0,0 +1,20 @@
+import requests
+
+
+class Pictures:
+    def __init__(self, token) -> None:
+        self.url = "https://api.pexels.com"
+
+        self.parameters = {"orientation": "square", "size": "small"}
+        self.headers = {"Authorization": f"{token}"}
+
+    def search(self, topic):
+
+        search_path = "/v1/search"
+        search_params = {**self.parameters, "query": topic}
+
+        r = requests.get(
+            url=self.url + search_path, params=search_params, headers=self.headers
+        )
+
+        return r.json()

memory-game/mg-backend/requirements.txt

@@ -0,0 +1,35 @@
+annotated-types==0.7.0
+anyio==4.4.0
+certifi==2024.6.2
+click==8.1.7
+dnspython==2.6.1
+email_validator==2.2.0
+fastapi==0.111.0
+fastapi-cli==0.0.4
+h11==0.14.0
+httpcore==1.0.5
+httptools==0.6.1
+httpx==0.27.0
+idna==3.7
+Jinja2==3.1.4
+markdown-it-py==3.0.0
+MarkupSafe==2.1.5
+mdurl==0.1.2
+orjson==3.10.5
+pydantic==2.7.4
+pydantic_core==2.18.4
+Pygments==2.18.0
+python-dotenv==1.0.1
+python-multipart==0.0.9
+PyYAML==6.0.1
+rich==13.7.1
+shellingham==1.5.4
+sniffio==1.3.1
+starlette==0.37.2
+typer==0.12.3
+typing_extensions==4.12.2
+ujson==5.10.0
+uvicorn==0.30.1
+uvloop==0.19.0
+watchfiles==0.22.0
+websockets==12.0

memory-game/mg-backend/test_data.py

@@ -0,0 +1,74 @@
+data = [
+    {
+        "medium_url": "https://images.pexels.com/photos/19314176/pexels-photo-19314176.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 19314176,
+        "photo_url": "https://www.pexels.com/photo/ball-in-golden-paper-19314176/",
+        "topic": "ball",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/1592384/pexels-photo-1592384.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 1592384,
+        "photo_url": "https://www.pexels.com/photo/shallow-focus-photography-of-blue-alpine-car-1592384/",
+        "topic": "car",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/444492/pexels-photo-444492.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 444492,
+        "photo_url": "https://www.pexels.com/photo/golden-retriever-puppy-mix-444492/",
+        "topic": "dog",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/160722/cat-tiger-getiegert-feel-at-home-160722.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 160722,
+        "photo_url": "https://www.pexels.com/photo/silver-tabby-cat-lying-on-green-grass-160722/",
+        "topic": "cat",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/694587/pexels-photo-694587.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 694587,
+        "photo_url": "https://www.pexels.com/photo/silhouette-of-boy-running-in-body-of-water-during-sunset-694587/",
+        "topic": "sun",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/821718/pexels-photo-821718.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 821718,
+        "photo_url": "https://www.pexels.com/photo/full-moon-821718/",
+        "topic": "moon",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 102104,
+        "photo_url": "https://www.pexels.com/photo/red-and-orange-apple-fruit-102104/",
+        "topic": "apple",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/2872767/pexels-photo-2872767.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 2872767,
+        "photo_url": "https://www.pexels.com/photo/photo-of-peeled-banana-on-yellow-plate-and-background-2872767/",
+        "topic": "banana",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/207732/pexels-photo-207732.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 207732,
+        "photo_url": "https://www.pexels.com/photo/grayscale-photo-of-books-207732/",
+        "topic": "book",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 1464625,
+        "photo_url": "https://www.pexels.com/photo/grey-sneakers-with-dense-surface-of-texture-for-comfortable-everyday-wearing-1464625/",
+        "topic": "shoe",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/2098848/pexels-photo-2098848.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 2098848,
+        "photo_url": "https://www.pexels.com/photo/brown-sun-hat-and-sandals-on-sand-2098848/",
+        "topic": "hat",
+    },
+    {
+        "medium_url": "https://images.pexels.com/photos/698275/pexels-photo-698275.jpeg?auto=compress&cs=tinysrgb&h=350",
+        "photo_id": 698275,
+        "photo_url": "https://www.pexels.com/photo/tree-surrounded-by-snow-698275/",
+        "topic": "tree",
+    },
+]

memory-game/mg-frontend/src/App.jsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import "./App.css";
 import GameBoard from "./components/gameboard";
+import Scoreboard from "./components/scoreboard";
 
 function App() {
+  const [score, setScore] = useState(0);
+  const [highScore, setHighScore] = useState(0);
+
   return (
     <>
-      <GameBoard />
+      <Scoreboard score={score} highscore={highScore} />
+      <GameBoard score={score} setScore={setScore} />
     </>
   );
 }

memory-game/mg-frontend/src/components/card.jsx

@@ -4,8 +4,8 @@ export default function Card(props) {
   return (
     <div
       className="card"
-      onClick={(event) => onClick(event)}
-      data-cardName={props.title}
+      onClick={(event) => onClick(event, props.setScore, props.score)}
+      data-cardname={props.title}
     >
       <div className="card-img">
         <Image src={props.imgSrc} alt={props.imgAlt} />
@@ -19,7 +19,8 @@ function Image(props) {
   return <img src={props.src} alt={props.alt} />;
 }
 
-function onClick(event) {
+function onClick(event, setScore, score) {
   // implement something to handle the things ID
+  setScore(score + 1);
   console.log(event.currentTarget.dataset.cardname);
 }

memory-game/mg-frontend/src/components/gameboard.jsx

@@ -4,7 +4,6 @@ import "../styles/gameboard.css";
 
 export default function GameBoard(props) {
   const [cards, setCards] = useState([]);
-
   useEffect(() => {
     fetchCards({ setCards });
   }, []);
@@ -14,10 +13,12 @@ export default function GameBoard(props) {
       {cards.map((item) => {
         return (
           <Card
-            title={item}
-            imgSrc="placeholder"
+            title={item.topic}
+            imgSrc={item.medium_url}
             imgAl="Placeholder"
-            key={item}
+            key={item.topic}
+            setScore={props.setScore}
+            score={props.score}
           />
         );
       })}
@@ -26,6 +27,6 @@ export default function GameBoard(props) {
 }
 
 async function fetchCards({ setCards }) {
-  // some async thing that loads the cards
-  setTimeout(() => setCards([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), 2000);
+  const cards = await fetch("http://localhost:8000/");
+  setCards(await cards.json());
 }

memory-game/mg-frontend/src/components/scoreboard.jsx

@@ -0,0 +1,10 @@
+import "../styles/scoreboard.css";
+
+export default function Scoreboard(props) {
+  return (
+    <div className="scoreboard">
+      <p>SCORE: {props.score}</p>
+      <p>HIGH SCORE: {props.highscore}</p>
+    </div>
+  );
+}

memory-game/mg-frontend/src/index.css

@@ -23,6 +23,7 @@ a:hover {
 }
 
 body {
+  padding: 0;
   margin: 0;
   display: flex;
   place-items: center;

memory-game/mg-frontend/src/styles/card.css

@@ -1,9 +1,8 @@
 .card {
   display: flex;
   flex-direction: column;
-  min-width: 300px;
-  min-height: 300px;
   background: gray;
+  padding: 1em;
 }
 
 .card-img img {

memory-game/mg-frontend/src/styles/gameboard.css

@@ -1,5 +1,7 @@
 .gameboard {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 25px;
+  display: inline-grid;
+  /* grid-template-columns: 1fr 1fr 1fr; */
+  grid-template-columns: repeat(auto-fit, minmax(min(270px, 90%), 1fr));
+  gap: 1rem;
+  width: 75vw;
 }

memory-game/mg-frontend/src/styles/scoreboard.css

@@ -0,0 +1,3 @@
+.scoreboard {
+  text-align: right;
+}