SPOKELIZARD.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "a4c38b38",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"font-family: Arial, sans-serif; font-size: 36px; color: #4CAF50; text-align: center;\">\n",
    "    <span style=\"font-size: 48px;\">Spoke</span><span style=\"color: #FF5722;\">Lizard</span> <span style=\"font-size: 24px; color: #2196F3;\">🦎</span>\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9fbd155b",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "My project aims to analyze the data flow generated by my web app, which is designed to create a fun game for spending time with friends 🎉. The game features the first multiplayer \"Rock, Paper, Scissors\" ✊✋✌️ using a machine learning model I created and trained to recognize gestures through the camera of any device, whether simple or complex 📱💻."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "03a5b096",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "Initially, the project focused on classifying gestures (rock, paper, or scissors) using machine learning 🤖. This process allowed me to train the model with a predefined dataset 📊. Subsequently, the model was integrated into the web app, which can now generate and analyze new data in real-time during gameplay sessions 🎮."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6f5605ca",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "Through this project, I aim to explore and optimize the data flow, continuously improving gesture recognition and player interaction, making the gaming experience increasingly smooth and engaging 🌟.\n",
    "\n",
    "Additionally, the pipeline I will present later includes a complex system that can be further enhanced in the future with applications capable of predicting players' future gestures 🔮. Currently, the amount of data available is quite small, but I am confident that with more gameplay sessions and data collection, it will be possible to further optimize the model and improve prediction accuracy 📈."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a6dad944",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"font-family: Arial, sans-serif; font-size: 48px; color: #FF5722; text-align: center; text-transform: uppercase;\">\n",
    "    <br>NOW...NOT AFTER FEW PROBLEMS<br>\n",
    "</div>\n",
    "\n",
    "<img src=\"assets/pablo.jpg\" width=\"800\" height=\"600\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1929878a",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"font-family: Arial, sans-serif; font-size: 36px; color: #2196F3; text-align: center;\">\n",
    "    HERE'S MY <span style=\"color: #FFD700;\">PIPELINE</span> <span style=\"font-size: 24px;\">⭐</span>\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "807179da",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "<img src=\"assets/pipeline.png\" width=\"900\" height=\"500\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4ebc1646",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "Here is a modified version with a reason for each technology chosen in your TAP project pipeline:\n",
    "\n",
    "- I chose to use APIs for extracting data from an internal web application because of their flexibility and ease of integration with existing systems.\n",
    "- I configured and used Logstash for its ability to manage data collection from different sources centrally and scalably.\n",
    "- I implemented Kafka to leverage its ability to manage high-speed data flows via messages and distributed queues."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "10215c8a",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "- I opted for Apache Spark for real-time distributed data processing due to its powerful parallel computing capability.\n",
    "- I chose Elasticsearch for optimized indexing and storage of processed data to facilitate search and analysis.\n",
    "- I used Kibana for its intuitive interface that allows interactive data visualization through customizable dashboards and graphs."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "654048be",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"font-family: Arial, sans-serif; font-size: 32px; text-align: center;\">\n",
    "    <span style=\"color: #4CAF50;\">SPOKELIZARD</span>, THE <span style=\"color: #2196F3;\">WEB APP</span> YOU NEEDED<span style=\"font-size: 24px;\">🦎💻</span>\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3610562d",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "- Start with sing-up\n",
    "  ![sing-up](assets/site/sing-up.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d16818cf",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "- Sing-in\n",
    "  ![sing-in](assets/site/sing-in.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "30c114f8",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "- Home\n",
    "  ![home](assets/site/home.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "aad3db54",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "- One player creates the room\n",
    "  ![create-game](assets/site/create_game.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d69652c3",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "- The other join\n",
    "  ![join-game](assets/site/join_game.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2e2fd8cb",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "- Enable camera\n",
    "  ![enable](assets/site/enable.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2339a619",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "- The LAG\n",
    "  ![lag](assets/site/keep-lag.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7ac7f0b7",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "- AND sign your favorite gesture\n",
    "  ![sign](assets/site/sign.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2b56d207",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "- sometimes you win, sometimes you lose\n",
    "  ![lose](assets/site/winlose.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6a1bc982",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "This web app was written using Node.js with Express.js for the REST API and web sockets. TypeScript was used for typing JavaScript. The front end is solely React with Shadcn components.I have been implemented REST API, so as to facilitate the work of me of the future (failing miserably)... but all good that ends with containers running!\n",
    "<img src=\"assets/spark.jpeg\" width=\"500\" height=\"300\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "35556a25",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"font-family: Arial, sans-serif; font-size: 32px; font-weight: bold; color: #2196F3; text-align: center;\">\n",
    "    Here’s how the /games section looks\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4f4a9220",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "<img src=\"assets/tecnologies/games.png\" width=\"500\" height=\"300\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "db3dfa51",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color: #4CAF50; text-align: center;\">\n",
    "    The technologies used are:\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ba5b4ef8",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/tecnologies/logstash.png\" width=\"300\" height=\"150\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5dd71375",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Logstash plays a crucial role in processing CSV data containing game information within a data pipeline. It facilitates seamless data ingestion, transformation, and integration with downstream systems, thereby enabling organizations to derive actionable insights from their game data effectively.\n",
    "\n",
    "If you're already using Elasticsearch for data indexing and searching, Logstash seamlessly integrates with this ecosystem. This makes it easier to set up a comprehensive solution for managing and analyzing data."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ffe2012f",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/tecnologies/kafka.png\" width=\"300\" height=\"150\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b6ffe8c7",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Kafka is an open-source platform designed for managing real-time data streams. It handles large volumes of data reliably, enabling distributed and scalable transmission and processing of data between applications.\n",
    "\n",
    "I chose Kafka for its capability to manage high-throughput real-time data and its distributed architecture, which provides high availability and fault tolerance. Kafka also simplifies the creation of robust data pipelines and synchronization across heterogeneous systems, making it an ideal choice for integrating and managing complex data streams within a data infrastructure."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "31f6ef4a",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/tecnologies/spark.png\" width=\"300\" height=\"150\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5d74683e",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "**Apache Spark** is a powerful open-source unified analytics engine for large-scale data processing and computation.\n",
    "Regarding my scenario with data on rock-paper-scissors games, it's understandable that you haven't implemented data enrichment or machine learning-related tasks. The nature of rock-paper-scissors games is highly random and lacks meaningful patterns that could be leveraged for predictive analytics or machine learning models. Therefore, focusing on straightforward data processing and basic analytics using tools like Spark would be more suitable for summarizing and analyzing game outcomes rather than attempting complex predictions or machine learning algorithms."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8f444278",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/tecnologies/elastic.png\" width=\"300\" height=\"150\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e111485e",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Elasticsearch is a distributed search and analytics engine designed to store, search, and analyze large volumes of data in real-time. It uses a document-based JSON index model, providing high speed, horizontal scalability, and powerful capabilities for full-text search and aggregation. Elasticsearch is widely used for search applications, log monitoring, data analysis, and more, and it is part of the Elastic ecosystem, which also includes Logstash and Kibana."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "99a5a9a6",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/tecnologies/kibana.png\" width=\"300\" height=\"150\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1bc860f4",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Kibana is an open source data visualization platform developed by Elastic. It is designed to allow users to explore, view and analyze data collected by Elasticsearch and other sources. \n",
    "I chose Kibana for its ability to provide a powerful data visualization platform that integrates seamlessly with Elasticsearch, facilitating data analysis and presentation to make informed decisions and improve business operations."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c6d0c32a",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"font-family: Arial, sans-serif; font-size: 36px; font-weight: bold; color: #FF9800; text-align: center;\">\n",
    "    DASHBOARD\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1c31e2dc",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "<img src=\"assets/dashboard.png\" width=\"1400\" height=\"1000\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d92d5efa",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<div style=\"font-family: Arial, sans-serif; font-size: 36px; font-weight: bold; color: #FF9800; text-align: center;\">\n",
    "    Explanation of Graphs\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e6140500",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "\n",
    "<img src=\"assets/elementDashboard/rooms.png\" width=\"600\" height=\"400\">\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4eca69c8",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "this graph represents the most used Rooms, the name is common according to the user who creates the Room"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "34b64288",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/elementDashboard/roomsforplayers.png\" width=\"600\" height=\"400\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0501ba02",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "this graph represents the Rooms most used by each user\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a1dbf305",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/elementDashboard/signs.png\" width=\"600\" height=\"400\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "83a79383",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "this graph represents the used marks in percentage\n",
    "that is how many times were used: paper,  scissors and stone\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "eea142ae",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/elementDashboard/SignsForplayer.png\" width=\"600\" height=\"400\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8e8546a8",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "this graph represents the signs used by each player\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3db1b23b",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/elementDashboard/TimeplusUniquePlayer.png\" width=\"600\" height=\"400\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f73c4f39",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "this graph represents the sum of timestamps (a bit useless, because I don’t have the correct display of timestamps) and then how many distinct players have played"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a151b2e1",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"assets/attention.png\" width=\"1000\" height=\"800\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "72fb3809",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "<div style=\"font-family: Arial, sans-serif; font-size: 28px; font-weight: bold; color: #2196F3; text-align: center;\">\n",
    "    Thank you all for your attention 🌟\n",
    "</div>\n"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}