Monthly Archives: February 2024

GPT powered personal agent Clippy

Posted on by

We claim badges:

  • Client Side Salsa – for the react code for PCF control
  • Hipster – for using node.js for secure communication
  • Right now – for socket io for real time communication with the active users in Model driven app
  • Nasty Hacker – for incredibly awesome solution with dirty hack on the model driven side
  • Power User Love – for using socket io with Azure Function in low-code power apps

 

High Level Diagram 

Implementation 

All realtime communication is implemented via the soket.io that hosted on Azure. 

Project Update: Real-Time Communication and Enhanced User Interaction!

We’re excited to share the latest update on our project, featuring a significant enhancement in real-time communication capabilities. Now, administrators and backend integrations can seamlessly send messages to users who have opened specific records. This means that when there’s a change in the record status (e.g., case completion, modification), users will receive instant notifications prompting them to update their page for the latest changes. 

This feature not only streamlines communication but also serves as a handy tool for various onboarding processes. Additionally, it facilitates users in understanding what has changed post the deployment of a new release. 

Behind the scenes, we’ve implemented Clippy PCF, built upon the ClippyJs project, to empower this real-time communication. Leveraging the power of socket.io hosted on Azure, our solution ensures swift and efficient message delivery. 

Moreover, the backbone of the real-time communication lies in Azure Functions, written in Node.js. These functions diligently send out notifications to the socket.io instance hosted on Azure, creating a seamless and responsive user experience. 

Exciting times lie ahead as we continue to innovate and refine our project to meet the evolving needs of our users. Stay tuned for more updates, and thank you for being a part of our journey!


Business scenario

It supports real-time communication. So, Administrator or backend integration can send the message to the user that has opened the record. For instance: backend integration changed the status of the record (case has been completed, changed, etc..), all user that has opened record will receive the notification that they need to update the page to receive the lates changes.  


Responsify all the things!

Posted on by

Adaptive solutions are always important as you no longer have any control on what kind of device the user is hacking along on.

Power Pages comes with pretty good responsive support out of the box

Responsiveness was once considered a kind of black art, but fortunately, most modern solutions now offer robust support right out of the box. However, when integrating Power Pages, bots, and canvas apps, seamless functionality from the start isn’t always guaranteed.

Embedding PlumbBot needed minimal adjustments to support responsiveness

What realy gave us a headacke was embedded canvas apps. Yes they do resize, but leaves a lot of uneeded blank space on the top of the page which makes the app “disapear” on a mobile device:

Unwanted spacing in the top


The solution might seem quite obvious to a seasoned frontend designer, but for those of us who are more accustomed to low-code plumbing, navigating through CSS, JS, IFRAMES oh my my…

So we spent the better part of the day chogging along, and finally, we arrived at a solution we were happy with.

No more wasted space in the top

How can so little code take so mutch time???

@media (max-width: 1200px) {
    #il1tn4 {
    	margin: 0px !important;
        padding: 0px !important;
    }

    #iebs75 {
        padding: 0px;
    }
}

@media (max-width: 992px) {
    #il1tn4 iframe {
        height: 420px !important;
    }    
}

@media (max-width: 767px) {
    #il1tn4 iframe {
        height: 170px !important;
    }  
}
Works in horizontal orientation

Follow Clippy and be awesome

Posted on by

We claim badges:

  • Go With The Flow – for automating the information delivery process
  • Mario badge – for gaming experience that transforms the user interaction
  • Retro bage – for using Clippy
  • Power User Love – for using pro code PCF control in low-code power apps

Why You Absolutely Need a ChatGPT-Powered Clippy in the Dataverse! 

Hey there, digital adventurers! Ever found yourself lost in the endless expanse of the dataverse, wishing you had a trusty sidekick? Well, guess what? A ChatGPT-powered Clippy is just the hero you need!  

  1. Your Personal Navigator in the Digital Sea Navigating the dataverse can be like trying to find a needle in a stack of needles! But fear not, with a ChatGPT-Clippy, you’ve got the ultimate guide. Whether it’s data dungeons or information islands, Clippy’s there to steer the ship!
  2. 24/7 Availability – No Coffee Breaks Needed Clippy doesn’t sleep, eat, or take coffee breaks (though it might pretend to, just for the fun of it). It’s like having a super-efficient robot friend who’s always there for you – day or night!
  3. A Friend in the Lonely Digital Void The dataverse can be a lonely place, but with a ChatGPT-Clippy, you’ve got a friend who’s always ready to chat, joke, or offer a digital shoulder to lean on. Who knew pixels could be so comforting?

Remember, with a ChatGPT-Clippy, you’re not just surviving the digital world; you’re thriving in it!

Business Scenarios:  

Need the lowdown on our data without diving into the digital depths ourselves? Clippy’s on it, transforming into a detective, magnifying glass and all. “Ah-ha! Here’s the scoop on our latest customer feedback,” it declares, unveiling insights with the dramatic flair of revealing a hidden treasure. With Clippy, our admin center becomes a stage, and data notifications are the main act, keeping us informed (and entertained) in the most amusing way possible. It provides data-driven AI-based insights on the Princeses cases requests.

Iplementation 

Clippy PCF based on the ClippyJs project.

Roadmap 

Premium users will be able chouse his own virtual agent. And chat with him via the Microsoft Copilot Studio integration. 

Figure 1.0 – Available characters 

Coommunity Champioon with Cake

Posted on by

Several teams had risen before dawn, and it had been hours since they had breakfast. Sensing it was an opportune moment for a treat, Team Boouvet decided to bring out some cake. Dennis had prepared a delightful French apple cake. Ginevra took the initiative to visit each team, offering cake and words of encouragement.

She even gathered snacks from the other teams!

French Apple Cake – Recipe from a French aunt I know from Cannes, ranked by priority:

Apples: 

  • Peel at least 5 apples and cut into 8 small wedges, cut away the hard parts.
  • Flambé apples with butter, sprinkle sugar on it. Feel free to pour a little cognac or Grand Marnier liqueur – pour 6-7 spoons of cognac/liqueur.
  • Simmer and stir until the apples become soft. (approx. 5 min).

Cake:

  • 12 tablespoons of wheat flour
  • 2 1/2 teaspoon baking powder mixed well with wheat flour
  • 6 tablespoons sugar
  • 7 tablespoons milk
  • 6 tablespoons soy oil/sunflower oil
  • 3 large eggs (4 small)
  • Whisk everything into a batter, best result with an electric whisk.
  • Bake at 180 degrees for 22 minutes. (Add extra last minutes and monitor it so that it does not burn the top).
  • Take out and put aluminum foil over and let it bake the dough, usually 10 more minutes. But poke a hole in the middle and feel if the dough is done enough).

Glaze:

  • Melt 100g butter in low heat from a small pot or microwave (not frying hot)
  • 2 tablespoons sugar
  • 1 raw egg
  • Stir and mix together. When the cake is done, let it rest for 10 minutes – brush the surface so that the glaze covers over.

    Serve with vanilla sauce if you want.

Each team member who enjoyed the cake is warmly invited to show their appreciation by giving Dennis a hug.

Dear Judges❤️

Posted on by

We have made a costum GPT to validate badge claims.
Pleas feed it with the badge the team wants to claim, and the claim.

Linlk: https://chat.openai.com/g/g-PSSLRZ7I3-hackathon-validator
Kind regards NerdeNinjas

Show And Tell

Posted on by

Imagine coming home from work and all you want to do is play a game to relax. Only problem is that new games are expensive and you can’t afford to buy all of the games that come out. You have opened your Steam Account and are looking at the list of games you have beaten many times before.

Out of the blue you see a new game that is free and promises a dynamic experience you have never seen before

Donkey Kong’s Amazing Adventures

The idea of the game is to dynamically change based on the users input. The first thing a user is presented with would be the chat dialog to define inputs

The user input is then translated to predefined Promts in Power Automate.

All data is stored in Dataverse for statistical purposes and is used when the application loads. When opening the game, the game configuration is loaded, and your custom experience is ready to be played.

An example of a configuration where Scott is the main character and the theme was similar to Mario’s Rainbow Road. The board setup is dynamically written from AI based on the user input (Easy , Medium , Hard).

After completing the game you will be presented with a list of high scores to further the competitive spirit gaming.

More to come, so stay tuned for lots of feature updates!!!

Pink Paradise

Posted on by

With this post, we claim the Happy Camper Bagde.

While creating a fun game where Princess Peach saves Mario, our camp at Peaches of Itera is just awesome. We dressed up as Peach and Mario to set the right mood, and the whole camp is buzzing with excitement and friendship.

Our colorful costumes match the game’s energy and our camp is a creative and teamwork-filled space. When the sun sets, lanterns light up our camp, making it magical. It’s not just a game; it’s a super fun experience where everyone is part of a cool story of success and friendship. In our pink paradise, happiness goes beyond the game, leaving lasting memories like the sweet smell of peaches

Embedding Numbnut

Posted on by

In the all digital world it might be hard to physically flip a switch, but we at least have physical buttons triggering good vibes

Every time the users click the button on the right, the Raspberry PI will pickup the selection and run an automation. The automation will then play a selected song on a speaker pr team.

Data Miner

Posted on by

For our solution we heavily rely on 3.rd party services from AI to deliver a unique gaming experience. The first step in our application is asking questions to the user about the experience they want to play.

The values are sent over to a flow that has a custom connection to OpenAI prompting. Based on the promts this provides we will generate a unique gaming experience to our customers.

The first and most important promt is “Creating the Landskape”

The JSON that is received above is a complex structure of X and Y cordinate values. Each one representing a brick or movable space for the game.

Next step is evaluating this data in Power Apps, and the result is a playable game like the one below:

We have several more promts (Boxes in RED) that make up other elements of the game. This combines the API’s of DALL-E and OpenAI Chat promting. Together with these external API’s we generate a unique experience for the gamer each time they play. This value makes us one of the few games out there you can play time and time again without ever having to replay the same track!

Five badges in one poost?

Posted on by

Toad, a character widely recognized as Mario’s loyal companion, assumes a different role in our scenario. Instead of assisting Mario, Toad will be guiding Princess Peach through the perilous landscapes of the Mushroom Kingdom. Known for his extensive knowledge, Toad has documented everything in his personal wiki, which serves as a comprehensive guide to their world. In our application, Toad will utilize this knowledge to answer Princess Peach’s queries via a chat interface. This interactive feature will allow Princess Peach to navigate her journey with greater confidence and understanding.

Toad, an AI bot powered by Copilot Studio, learns from the web and adapts to new data. It uses advanced machine learning algorithms to understand and interpret information. This continuous learning makes Toad a versatile tool for tasks like data analysis, content creation, and problem-solving. It represents the next generation of AI, ready to assist with its ever-growing knowledge. (New text added here)

Live demo of Toad:

Who can resist the thrill of a captivating game? Our app takes you on an exhilarating journey, brimming with elements of gamification. It features a sophisticated scoring system for our beloved Princess Peach, tracking her progress throughout the game.

Live demo of score:

But that’s not all! Princess Peach has access to a dynamic Power BI dashboard, allowing her to review her progress and identify her strengths and areas for improvement. This interactive tool serves as a constant motivator, pushing her to strive for excellence

Last night, we celebrated a significant achievement as we won the award for ‘Excellent User Experience’ for Thursday. This accolade is a testament to the hard work of our experienced UX designer, who has crafted a fabulous Figma prototype to assist our developers. This victory leads us to the final chapter of our journey.

Last but not least, we invite you to step into the world of our application. Here, a vibrant pink palette, reminiscent of Peach’s dress, meets a shiny and glossy user interface, crowned with a touch of yellow, much like Peach’s crown. Our design choices, carefully considered for ease of navigation, make interacting with our app not just user-friendly, but a truly delightful experience. (New text added here)

Color palette from Figma

Live demo of shiny and glossy design (the design is not 100% complete in this video):

This post was edited 03.02 12:40

New text is marked with: (New text added here)

  • Added live demo of bot and some text
  • Added live demo of gamification
  • Added live demo of glossy design, picture and some text