
PhiloSphere is an immersive web app that transports users into a captivating dialogue with four of history's most profound thinkers: Marcus Aurelius, Confucius, Simone de Beauvoir, and Friedrich Nietzsche. This unique platform leverages multiple of OpenAI's Gen AI text models, allowing users to engage in deep, meaningful conversations about life’s greatest questions.
The inception of PhiloSphere was driven by a desire to explore GenAI and the relationship between AI and humans, to see if a conversation with AI could be deep and meaningful. Thus PhiloSphere is designed to be a transformative experience, encouraging users to explore different philosophical perspectives and apply them to their personal modern-day challenges.
In this article, I will delve into the genesis of PhiloSphere, discussing the process, of how platform was created. Try it here
I created the reaction video to showcase the interaction between PhiloSphere and people. To me the most interesting types of conversations are the ones where you as the user dares to be open and share personal information about oneself. In this video the participants asked the philosophers what they should strive for in their career and shared their job title and role. In return they got a highly direct answer within the context of their lives, and thus much more relevant than general philosophic advice.

Concept

Quite early in my experience with text-generating AI tools in 2022 I got aware of the phenomenon of "role-prompting". A powerful way of prompting an AI specifying the role the AI should act like, when answering a question. I found this experience amusing since role-prompting an AI did not only unlock answers with larger domain "smartness", but also gave the AI a certain personality, making it feel much more relatable and personal in it's answers. PhiloSphere utilizes this quality of text generating AI through GPT4 to enact it's inhabiting philosophers. Further more a fifth AI lives within the sphere. This is the environment of sphere itself that through GPT3.5-turbo has the ability to more quickly than GPT4, interpret the users question and call fourth the most relevant philosophers to answer in the most relevant sequence. As each of the philosophers answer, they take each others previous answers into consideration, and like in a debate forum, point out where they might agree or differ from each other.
Avoiding the uncanny valley

The philosopher Marcus Aurelius vizualised through AI image generations in 5 different levels of realism, examplifying the japanese roboticist Masahiro Mori's phenomenon of "the uncanny valley".
When designing the app, I needed a way to clearly show which philosopher was speaking at any time. It was natural to use the familiar design pattern of the 'chat thread', to give a clear history of who said what using avatars and name captions. However, roboticist Masahiro Mori, found that non-human figures that look "almost" human can be unsettling. He coined this term "The uncanny valley" and even added that this effect is amplified when adding movement. In my experience adding in AI generated text further amplified this phenomenon. Thus I decided that to circumvent the uncanny valley I wouldn't try to create perfect photorealistic pictures for message avatars but instead create realistic looking marble statues. I found that the marble statue visualisations, even when animated, didn't strike me as uncanny but rather helped convey the epicness of these wise past philosophers.

Creating an engaging chat experience
I found out when I tested my prototypes that when just presented with the philosophers without much introduction, is a bit like meeting someone completely new for the first time. You are in their presence but you might not know what to talk about. It was natural to me to start thinking about some way of breaking the ice between the user and the philosophers. I tried to do this by including their pictures before even the first question is entered as a means to show who is in the chat. I also added some context about them, a single descriptive line, stating who they are while keeping it short and sweet. I also added selectable cards so that the user's can get inspired on what questions, to ask and get the conversation going.
Responsive Design

To me it is an extremely empowering thought that you could have the wisdom of these prolific philosophers available anywhere in the world from any device even from your pocket. It was thus a goal of mine that to get access to the philosophers all you needed was a device with internet access. Responsive design is a design principle to create layouts of user interfaces that adapt to different screen sizes and proportions. As the digital landscape evolves and device preferences change, it's essential for a digital service to remain user-friendly and accessible for all users. Thus designing philosphere responsively was a must
Co-creation process

I used AI tools throughout the creation process from start to finish. I found AI a great source for second opinions and a strong partner in iterative work to continuously refine my ideas and their execution. The word cloud I created above incapsulates the activities in which I used AI productively. The tools I used was ChatGPT plus with multiple GPT's in text, code and image generation with chrome plugin "super power ChatGPT" for organisation, Perplexity for research, and Adobe Photoshop with firefly for image editing.

I used DALL·E 3 in ChatGPT plus for picture generation. This was mainly used for inspiration purposes, To get impulses of how an idea might look. To do this most smoothly I used my own, for the purpose made GPT, Kim -UI Design Style Guide. However contrary to the quick process of gathering inspiration with AI, creating final visual production pieces like the marble statues, I found this to be quite a process of scrambling. Getting just the right lighting facial look, the right crop, the right positioning, the right texture of marble, required much iteration as well as post refinement in photoshop.
Identity

I created a color palette in Figma using colors from the images I generated with ChatGPT and DALL·E. I adjusted some colors to meet the 'AA' minimum contrast standard for text visibility against backgrounds and used a whitening effect to define sections. To improve the user experience, I added a gray overlay that blends with the background and gradually becomes transparent. This effect makes it look like messages are fading into a fog as they scroll off the screen. I also included colorful, diffused stripes in the background that move slower than the text, creating a subtle and pleasant parallax effect. Drawing inspiration from my favorite AI Chat WebApp, pi, I chose the serif font "Lora" for all active text, adding a touch of sophistication to the design and "Inter" for simple labels.
Tech Stack

I programed the WebApp in Visual Studio Code as an React App. I previously did a course making AI-Apps using LangChain, OpenAI's API and Netlify for publishing in the official LangChain.js course so using the same stack for this app was a natural choice for me.
Thank you for reading! I sincerely appreciate your interest in my creation piece. If you have any questions, comments or feedback regarding the creation, please reach out, I'll love to hear from you and give you my thoughts.
Consider subscribing to my newsletter at the footer of my website, that way you'll get notified by e-mail next time I'm posting a creation or a reading.