B4 sempy add images,gif and fix grammar, spelling (#388)

* add description and pics

* Rename Paul.jpg to paul.jpg

* Delete content/ss24/bachelor/b4-sempy/techstack.md

* add techstack

* Update _index.md

* Update _index.md

* Update features.md

* add screenshot of modal

* correcting mistakes

* Delete content/ss24/bachelor/b4-sempy/screenbild.jpg

* add ps5 screenshot

* Update features.md

* Delete content/ss24/bachelor/b4-sempy/screenbild.jpg

* Add files via upload

* Delete content/ss24/bachelor/b4-sempy/screenbild_modal.jpg

* Add files via upload

* Add Screenshot

* add pipeline

* add pipeline

* pipeline to top

* add gif

* implement gif

* correct spelling

* correct spelling

* Delete content/ss24/bachelor/b4-sempy/openmodal.gif

* delete gif

* Delete content/ss24/bachelor/b4-sempy/bootstrap.png

* Delete content/ss24/bachelor/b4-sempy/chromex.png

* Delete content/ss24/bachelor/b4-sempy/css.png

* Delete content/ss24/bachelor/b4-sempy/discord.png

* Delete content/ss24/bachelor/b4-sempy/eldar.jpg

* Delete content/ss24/bachelor/b4-sempy/flask.png

* Delete content/ss24/bachelor/b4-sempy/github.png

* Delete content/ss24/bachelor/b4-sempy/html.png

* Delete content/ss24/bachelor/b4-sempy/js.png

* Delete content/ss24/bachelor/b4-sempy/mathieu.jpg

* Delete content/ss24/bachelor/b4-sempy/miro.png

* Delete content/ss24/bachelor/b4-sempy/openai.png

* Delete content/ss24/bachelor/b4-sempy/paul.jpg

* Delete content/ss24/bachelor/b4-sempy/pipeline.jpg

* Delete content/ss24/bachelor/b4-sempy/python.png

* Delete content/ss24/bachelor/b4-sempy/screenbildmodal.jpg

* Delete content/ss24/bachelor/b4-sempy/sempylogo.jpg

* Delete content/ss24/bachelor/b4-sempy/son.jpg

* Delete content/ss24/bachelor/b4-sempy/whatsapp.png

* Delete content/ss24/bachelor/b4-sempy/yasin.jpg

* Delete content/ss24/bachelor/b4-sempy/youtube.png

* Add files via upload

* add compressed images

* add compressed images

* add compressed images

* add compressed images

* Delete content/ss24/bachelor/b4-sempy/github.png

* add compressed image

* add compressed image

content/ss24/bachelor/b4-sempy/_index.md

@@ -6,7 +6,7 @@ claim = ""
 abstract = ""
 
 # Properties for displaying the project in the project list
-card_image = "sempylogo.jpg"
+card_image = "sempylogon.jpg"
 # card_description is deprecated, will be replaced by abstract/and or claim
 card_description = "SEMPY is an AI research agent that supports customers of the idealo website in making better buying decisions. This tool gathers information from various websites, summarizes it, and provides the best advice." 
 
@@ -22,19 +22,20 @@ source_link = ""
 
 
 {{<section title="Our Goal">}}
-In recent years, artificial intelligence technology has advanced significantly, and today many people use technologies such as OpenAI's GPT-4, Google's TensorFlow, and IBM Watson because these tools make life easier. Our goal is to simplify the lives of customers on idealo, helping them with their purchasing decisions and saving them a lot of time. We aim to leverage this technology to enhance the customer experience on the idealo site. Our SEMPY research aims to gather the most important product data and customer opinions in one place, avoiding the need to search on different platforms such as YouTube, Amazon, and Google. 
+In recent years, artificial intelligence technology has advanced significantly, and today many people use technologies such as OpenAI's GPT-4, Google's TensorFlow, and IBM Watson because these tools make life easier. Our goal is to simplify the user experience on idealo, helping with purchasing decisions and saving time during researching for a product. Our SEMPY research aims to gather the most important product data and customer opinions in one place, avoiding the need to search on different platforms such as YouTube, Amazon, and Google. 
 {{</section>}}
 
-{{<section title="The team">}}
-The SEMPY team consists of five young IMI students who came together to build this project. None of us had experience working with the OpenAI API, so it was quite a challenge for us. Through this project, we gained a lot of knowledge about working with AI and learned a lot by supporting each other during the development.
+{{<section title="The Team">}}
+Team SEMPY consists of us five young IMI students **S**on, **E**ldar, **M**athieu, **P**aul and **Y**asin (SEMPY) who came together to build this project. None of us had experience working with the OpenAI API, so it was quite a challenge for us. Through this project, we gained a lot of knowledge about working with AI and by supporting each other during the development.
+
 
 {{</section>}} 
 
 {{<gallery>}}
-{{<team-member image="son.jpg" name="Son Xuan Hoang">}} 
-{{<team-member image="paul.jpg" name="Paul Schiffner">}}
-{{<team-member image="yasin.jpg" name="Yasin Dalowar">}}
-{{<team-member image="mathieu.jpg" name="Mathieu Wassmuth">}}
-{{<team-member image="eldar.jpg" name="Eldar Akhundzada">}}
+{{<team-member image="sonn.jpg" name="Son Xuan Hoang">}} 
+{{<team-member image="eldarn.jpg" name="Eldar Akhundzada">}}
+{{<team-member image="mathieun.jpg" name="Mathieu Wassmuth">}}
+{{<team-member image="pauln.jpg" name="Paul Schiffner">}}
+{{<team-member image="yasinn.jpg" name="Yasin Dalowar">}}
 {{</gallery>}}
 

content/ss24/bachelor/b4-sempy/features.md

@@ -5,10 +5,10 @@ draft = false
 +++
 
 {{<section title="Features">}}
-Our SEMPY Button offers a relaxed shopping experience that provides customers with the best recommendations based on the information from the three major platforms: idealo, Amazon, and YouTube. Whether the customer is interested in a Victorinox Huntsman, an MSR Hubba Hubba 2 NX tent, or Apple AirPods 3, the SEMPY-AI Tool caters to the customer's individual needs.
+Our SEMPY Button offers a relaxed shopping experience that provides customers with recommendations based on the information from the three major platforms: idealo, Amazon, and YouTube. Whether the customer is interested in products like a "Victorinox Huntsman", an "MSR Hubba Hubba 2 NX", or "Apple AirPods 3", the SEMPY-AI Tool caters to the customer's individual needs.
 
-Due to its crawling capabilities, the SEMPY-AI Tool analyzes customer reviews, pros and cons, Q&A, ratings, and YouTube transcripts from Idealo, Amazon, and YouTube. It then generates a text with all the important information from these sources in an overview. It emphasizes the key points mentioned by customers, helping prospective buyers make informed purchasing decisions. Furthermore, the SEMPY-AI Tool provides advice on which product is best suited for a person. 
+{{<image src="screenbildmodaln.jpg" alt="Screenshot vom Modal" caption="Screenshot of SEMPY-modal on the idealo Website.">}}
 
-<-Video->
+We take information from idealo, YouTube and Amazon and give them to the OpenAi to process and summarize them. It then generates a text with all the important information in an overview with pros and cons, a short summary of customer reviews, a review video, FAQ's and a recommendation of a target audience. 
 
 {{</section>}}

content/ss24/bachelor/b4-sempy/process.md

@@ -5,23 +5,26 @@ draft = false
 +++
 
 {{<section title="Process">}}
+
+{{<image src="pipelinen.jpg" alt="Screenshot von der Pipeline" caption="Pipeline of data processing.">}}
+
 At the beginning of the project, there was a brainstorming phase where we wanted to define how our project should look like at the end of the semester. Initially, we thought of having a tool where customers could have a conversation on the idealo website and ask everything about the product. We took inspiration from Perplexity AI, ChatGPT, and similar AI tools. 
 
-After a long discussion, we concluded that we would generate the output of the OpenAI API and place it on the website. We had a rough idea how our project should look like. Our supervisors recommended us to use GitHub for the project because it makes it efficient to collaborate as a group. Following a lengthy discussion, we decided to use the programming language “Python” because it is more convinient to use the OpenAI API with it. 
+After a long discussion, we concluded that we would generate the output of the OpenAI API and place it on the website. We had a rough idea of what our project should look like. Our supervisors recommended us to use GitHub for the project because it makes it efficient to collaborate as a group. Following a lengthy discussion, we decided to use the programming language “Python” because it is more convenient to use the OpenAI API with it. 
 
-During our project we had a weekly meetups where we defined clear tasks we wanted to be done for the week. Then we would split up in smaller groups, assign the tasks and work on them. At the meetup we would also get input by employees of idealo in a weekly meetings. 
+During our project we had weekly meetups where we defined clear tasks we wanted to be done for the week. Then we would split up in smaller groups, assign the tasks and work on them. At the meetup we would also get input by employees of idealo in weekly meetings. 
 
-We would create a class that takes product information as input and give it to OpenAI and let it output small informative "bits" of information for the user.
+We would create a class that takes product information as input and gives it to OpenAI and lets it output small informative "bits" of information for the user.
 
 We would create a class that takes an input consisting of several pieces of product information and make OpenAI generate different outputs based on the use case such as bullet points for pros and cons or a text about a possible target group for that specific product. 
 
-Our next task was to find a way to implement our program into the idealo website environment. Since it was not possible for us to access the official html document of idealo, the first idea that came to our mind was to create our own website environment that is similiar to idealo's website. After discussing this idea with our supervisors, they suggested us to use a chrome extension instead to manipulate the idealo website locally. Noone in our group had previous expierience with building a Chrome extension, so we had to do a lot of research first. After some attempts we had a working chrome extension with which we could insert anything we want into idealo's website. 
-To get our AI output to the Chrome extension, we set up an server endpoint with the Flask API, where we could route the information from our program to the Chrome extension to display it on the Idealo Website. 
+Our next task was to find a way to implement our program into the idealo website environment. Since it was not possible for us to access the official html document of idealo, the first idea that came to our mind was to create our own website environment that is similar to idealo's website. After discussing this idea with our supervisors, they suggested we use a chrome extension instead to manipulate the idealo website locally. None in our group had previous expierience with building a Chrome extension, so we had to do a lot of research first. After some attempts we had a working chrome extension with which we could insert anything we wanted into idealo's website. 
+To get our AI output to the Chrome extension, we set up a server endpoint with the Flask API, where we could route the information from our program to the Chrome extension to display it on the Idealo Website. 
 
-After presenting this to our supervisors, they gave us a design tip. Instead of printing the output on the website, we should have a button that opens a modal window with the output. We finally had a fixed goal for our project and a clear vision of how it should look
+After presenting this to our supervisors, they gave us a design tip. Instead of printing the output on the website, we should have a button that opens a modal window with the output. We finally had a fixed goal for our project and a clear vision of how it should look.
 
-At this stage of the project we have only used information that can be found on the idealo website itself. Since our initial goal is to advice the costumer based on real hands-on experience, we needed to include sources that are based on experiences from real costumer. We decided to try to include amazon reviews as well a the opinion of a trustworthy youtube review. 
+At this stage of the project we have only used information that can be found on the idealo website itself. Since our initial goal is to advise the customer based on real hands-on experience, we needed to include sources that are based on experiences from real customer. We decided to try to include amazon reviews as well a the opinion of a trustworthy youtube review. 
 
-We did a lot of fine-tuning at the end improving the quality of our prompts, resulting in a more detailed and correct output. Furthermore, we improved on the efficiency of our program by synchronicing the AI request and multithreading which reduced our program runtime by more than 50 percent.
+We did a lot of fine-tuning at the end improving the quality of our prompts, resulting in a more detailed and correct output. Furthermore, we improved on the efficiency of our program by synchronizing the AI request and multithreading which reduced our program runtime by more than 50 percent.
 
 {{</section>}}

content/ss24/bachelor/b4-sempy/techstack.md

@@ -1,47 +1,33 @@
 +++
 title = "Tech Stack"
-weight = 30
-draft = true
-hasMermaid = true
+weight = 1
 +++
 
-
-{{<section title="Tech Stack">}}
-Hugo offers a couple of options to include diagrams right in the source code, see
-[https://gohugo.io/content-management/diagrams/](https://gohugo.io/content-management/diagrams/)
-
-Here's a mermaid example: (note the hasMermaid = true parameter in the front matter!)
-
-```mermaid
-classDiagram
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-      +String beakColor
-      +swim()
-      +quack()
-    }
-    class Fish{
-      -int sizeInFeet
-      -canEat()
-    }
-    class Zebra{
-      +bool is_wild
-      +run()
-    }
-```
+{{<section title="Projektmanagement">}}
+{{<gallery>}}
+{{<image src="miron.png" alt="Miro Icon" caption="Miro">}}
+{{<image src="githubn.png" alt="Github Icon" caption="Github">}}
+{{<image src="discordn.png" alt="Discord" caption="Discord">}}
+{{<image src="whatsappn.png" alt="Whatsapp" caption="Whatsapp">}}
+{{</gallery>}}
 {{</section>}}
 
-
-{{<section title="Future">}}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. 
-
-
+{{<section title="Design / Styling">}}
+{{<gallery>}}
+{{<image src="cssn.png" alt="CSS Icon" caption="CSS">}}
+{{<image src="bootstrapn.png" alt="Bootstrap Icon" caption="Bootstrap">}}
+{{<image src="miron.png" alt="Miro Icon" caption="Miro">}}
+{{<image src="htmln.png" alt="HTML Icon" caption="HTML">}}
+{{<image src="chromexn.png" alt="Chromeextension Icon" caption="Chromeextension">}}
+{{<image src="jsn.png" alt="JavaScript Icon" caption="JavaScript">}}
+{{</gallery>}}
 {{</section>}}
 
+{{<section title="Backend">}}
+{{<gallery>}}
+{{<image src="pythonn.png" alt="Python Icon" caption="Python">}}
+{{<image src="openain.png" alt="OpenAI API Icon" caption="OpenAI API">}}
+{{<image src="youtuben.png" alt="YouTubeAPI Icon" caption="YouTubeAPI">}}
+{{<image src="flaskn.png" alt="Flask Icon" caption="Flask">}}
+{{</gallery>}}
+{{</section>}}