My first mini-apps in 2000

My mini-apps for Leslie’s Artgallery in 2005

My mini-apps for RadioLogic in 2015

Ideas for HuggingFace Mini-Apps

• Use of media (photos, illustrations, paintings, graffiti, images, videos, songs, music, poems, stories, etc.) from Luxembourgish or foreign creators and artists (with their consent) for the “Human or AI” quizzes on the topic of generative AI
• Recording a large number of media items for these applications, with automatic (random) generation of a related quiz displaying a specified number of media items. The content of a quiz will differ with each launch
• Storing the correct answers in a JSON file, along with information about the creators of the different media
• Cloning a quiz for the different languages
• Same scenario for the polls

Proposal for Division of Work

• Frontend and AI backend by LetzAI
• Knowledge apps with a model (template) and WordPress REST API by partners and external authors
• Hands-on apps by LetzAI and other specialists
• Quizzes and Polls by VO and other specialists

I created the following quiz in an Huggingface space with the help of ChatGPT-5. The link with the chat dialog is shared hereafter :

https://chatgpt.com/share/68ad48d8-3f48-8005-b7c9-b2ba9f9f6b7d

I used the images shown in the Concept document submitted to the ministry. I modified a few Python code lines in the source code provided by ChatGPT to comply with the latest Gradio version and to change the number of images. The whole process took me 2 hours.

Here are the result pages with correct answers and with some wrong answers :

ChatGPT-5 added on its own initiative the auto-generation of images at the first run when the /assets folder is empty and the menus “Rejouer (même ordre)” and “Rejouer & mélanger”. These menus are however not yet working, but I didn’t try to search the problem.

The correct answers are included in a JSON file also hosted in the /assets folder. Here is the code :

[
  {"file": "4-giraffe.jpg", "label": "IA"},
  {"file": "6-insekt-1.jpg", "label": "Humain"},
  {"file": "3-insekt-2.jpg", "label": "Humain"},
  {"file": "1-insekt-3.jpg", "label": "Humain"},
  {"file": "2-insekt-4.jpg", "label": "Humain"},
  {"file": "7-nilpferd.jpg", "label": "Humain"},
  {"file": "9-vogel-1.jpg", "label": "Humain"},
  {"file": "8-vogel-2.jpg", "label": "Humain"},
  {"file": "5-baum.jpg", "label": "Humain"}
]

It’s easy to clone the app in HuggingFace and to add versions in other languages by manually modifying the text and the labels.

By using the API of the app it can be added to the KI-Léierbud dashboard in the same way as the other mini-apps. Another possibility is to include it only with a link. Adding a second language takes about 15 minutes.

Following the discussion about Wagtail

(my contribution: https://admin.ki-leierbud.lu/archives/2154 ),

I would like to add some further information and comments:

---

Mini-Applications

The most well-known ecosystems of mini-applications are the App Store and Google Play.

In the field of AI, the majority of projects are mini-applications.

On HuggingFace alone, the largest AI platform used by more than 1.2 million users, the statistics show 600,000 Spaces (= mini-applications), more than 1.7 million AI models, over 20,000 datasets, and more than 50,000 organizations using HuggingFace’s paid services.

Other examples of AI ecosystems include OpenAI’s custom GPTs, Lovable communities, LetzAI’s Playground, and many other companies and organizations.

---

Compilation of Mini-Applications

With the command npm run build, one can compile a REACT application into a /dist folder containing an index.html, an /assets/xyz.css, and an /assets/xyz.js. This mini-application can then be run in a browser locally, on a small local Python server, or stored in the root folder of the PLESK server (in a subdomain or hierarchical folder). I tested both variants.

After the launch of ChatGPT-5, I asked the AI to code a prototype of a “Knowledge” mini-application directly in HTML, CSS, and JS, without going through React source files (.jsx, .tsx, etc.). This works, but ChatGPT-5 advises against it because one cannot benefit from the full power of the REACT ecosystem.

For hosting the mix of mini-applications coded with the two methods, I currently use the following file structure:

project-root/                                    /* httpdocs */
  index.html                                      /* landing page */
  toc.html                                          /* dashboard */
  about.html
  faq.html
  search.html
  login.html
 └─ operations/
 │       ├─ login/
 │        │   └─ index.html
 │       └─ search/
 │            └─ index.html
 │       ├─ section/                           /* knowledge */
 │            └─ app-name-1/             /* mini-app-1 */
 │                  ├─ index.html
 │                   └─ assets/ (...)
 │             └─ app-name-2/           /* mini-app-2 */
 │                   ├─ index.html
 │                   └─ assets/ (...)
 │             └─ app-name-3/           /* mini-app-3 */
 │                   ├─ index.html
 │                   └─ assets/ (...)
 │    ..........
 │
 │         ├─ section/                         /* quiz */
 │             └─ app-name-n/
 │                   ├─ index.html
 │                   └─ assets/ (...)
 │             └─ app-name-n+1/
 │                  ├─ index.html
 │                  └─ assets/ (...)
 │  .........

I am discussing with Misch to determine the most appropriate implementation of mini-applications while considering all constraints.

Creation and Hosting of Mini-Applications on HuggingFace

During the initial partner discussions, I suggested using HuggingFace as a platform for creating and hosting mini-applications for the KI-Léierbud portal, alongside LetzAI’s AI platforms. This idea is also included in the documents submitted to the Ministry of Digitalisation as part of our proposal.

I have a HuggingFace PRO account which costs $9 per month and allows the creation and hosting of an unlimited number of Spaces. A Space can be created with Gradio (=Python), Docker, or static templates. Spaces provide an API to connect them to a frontend. Limited shared GPU usage (ZeroGPU Space) is included in the PRO subscription.

So far, I have created 93 Spaces on HuggingFace, the majority of which are private Gradio applications not accessible to the public. I have developed prototypes for the KI-Léierbud project using the HuggingFace API, for example :

• https://huggingface.co/spaces/mbarnig/My_first_AI_Image
• https://huggingface.co/spaces/rtllu/RTL_Multilingual_News_Reader
• https://github.com/mbarnig/Text_to_Avatar

I created additional spaces in the HuggingFace accounts of RTL and of the ZLS (Zenter fir Lëtzebuerger Sprooch). The RTL mini apps are related to news-searching (inside several GigaBytes of JSON archives from the RTL Internet website stored on my PC) and to interactive avatars. The ZLS mini-apps are related to my STT and TTS development of models for speech transcription and synthesis which are now in production since several months.

I would like to revive the idea of using HuggingFace to create and host mini-applications for KI-Léierbud, to be included in the portal’s Landing Page and Dashboard.

Because if you can do more, you can certainly do less. A HuggingFace Space can host a mini-application without relying on an AI model—for example, a quiz or a poll—entirely independent of WordPress. With Python, such a mini-application can be built in just a few hours.

I created one example of this option to make it easier to understand. Here are the links to the HuggingFace space and to my explanations about the development :

https://huggingface.co/spaces/mbarnig/KI-Leierbud-Quiz

https://admin.ki-leierbud.lu/archives/2277

---

---

Why use independent (stand-alone) mini-applications?

• Different technologies can be used to build mini-applications.
• Mini-applications developed by external developers can be integrated (example: AI-Agent-Café).
• External developers’ code can be reused to develop a mini-application (example: Lux-ASR from uni.lu).
• Maintenance and extension of a mini-application are simplified.
• It’s easy to create individual mini-apps for the different languages by modifying only the text and the labels inside the code
• Mini-applications can be distributed and shared outside the KI-Léierbud framework.
• Mini-applications can be converted into mobile applications and distributed via the App Store and Google Play (example: Lux-ASR apps from uni.lu – https://www.linkedin.com/posts/petergilles_luxasr-ugcPost-7343571044714131456-PnX_ )

---

KI-Léierbud flagship mini-application (bonus)

The flagship mini-application of KI-Léierbud, planned to allow users to create a personal story and print it on a digital publishing platform, will very likely also be offered as a mobile application in the corresponding ecosystems.

openai.AuthenticationError: Error code: 401 – {‘error’: {‘message’: ‘You do not have access to the organization tied to the API key.’, ‘type’: ‘invalid_request_error’, ‘param’: None, ‘code’: ‘invalid_organization’}}

Comments about the development of the KI-Léierbud portal

Introduction

When I first started designing the KI-Léierbud website, I immediately considered building it with WordPress, a CMS I have been using for 20 years. However, the first tests carried out at the beginning of 2025 showed that WordPress does not allow the creation of dynamic “Mobile First” pages with the required flexibility and performance. There are indeed countless themes and plugins optimized for displaying content on mobile devices, but I did not find a valid solution.

Since the “Mobile First” option is a must—and is even mentioned in the proposal submitted to the Ministry—I looked for an alternative.

---

Mobile First

In my opinion, a “Mobile First” web page is characterized by the following features :

• A fixed header bar at the top with logos, buttons, menus, etc. (example: https://letz.ai)
• Preferably, a fixed footer bar at the bottom with navigation buttons (example: my Knowledge prototype)
• A swipe function to scroll through pages, or elements on a page, horizontally with the hand (example: https://letz.ai)
• Use of dynamic viewport units such as svh, lvh, and dvh to create responsive dynamic layouts and to adjust the size of media (images, videos, etc.) to different screen sizes:
  • svh (Small Viewport Height) – 1svh equals 1% of the visible area when browser controls are visible (e.g., navigation bar).
  • lvh (Large Viewport Height) – 1lvh equals 1% of the visible area when browser controls are hidden.
  • dvh (Dynamic Viewport Height) – 1dvh equals 1% of the viewport height, automatically switching between lvh and svh depending on whether the browser controls are visible or not.
    (examples: my Lovable projects)
• For an image on a page, its width including borders must not exceed the screen width, and its height including borders must not exceed the screen height. The image dimensions must be adapted while preserving the aspect ratio.
  (examples: my AI-style image quizzes)

My first experience with the “Mobile First” concept dates back to June 2000, when I created a new version of my website on the P&T Webplaza using dynamic HTML on my Compaq iPaq.

A more substantial experience began in mid-2015. I developed a training application for junior radiology residents at the University Hospital of Strasbourg. It is called RadioLogic and includes a series of projects on GitHub, some of which are related to displaying medical images on iPhones and iPads. At the time, I was a certified Apple developer.

• https://www.web3.lu/radiologic/
• https://github.com/?q=radiologic

I presented the project in December 2019 at the OrthancCON-2019 conference at the University of Liège, held at the Liège University Hospital. Moreover, the various DICOM sessions can be regarded as mini-apps.

Currently I have 270 GitHub repositories, most are private. Among the public repositores 39 are starred.

---

REST API & REACT

While browsing the Internet, visiting technical forums, and discussing with ChatGPT, I discovered the perfect solution for a Mobile First KI-Léierbud web page : a REACT application that fetches content from a CMS through a REST API. Since I was not familiar with REACT—because in recent years I had mainly programmed my applications in Python and Swift—I followed the instructions from a NextJS tutorial to develop a POC for converting JSON data retrieved via REST API from my WordPress server. The development was not too complicated, and the result was convincing.

What is REACT ?

REACT is a JavaScript library created by Facebook and maintained by Meta and by a large community.
REACT is a User Interface (UI) library.
REACT is a tool for building UI components.

REACT is the main UI for Mobile First webpages

There are numerous tutorials available on the web how to build REACT projects, for example on w3schools.com :

https://www.w3schools.com/whatis/whatis_react.asp

---

AI assisted development of REACT projects

Today the main platforms for AI assisted coding are Lovable.dev, Cursor, Claude-Code and ChatGPT-5.
An experienced user of such a platform can code a REACT app or a REACT template, ready for production, in 2 hours.
A new user can do it in 8 hours.

---

Lovable.dev

On February 21, 2025, Misch suggested that I participate in the creation of micro-applications for the LetzAI Playground and advised me to do so with the assistance of lovable.dev, a Swedish start-up offering an AI-assisted coding environment (powered by Anthropic’s Claude model). Here’s an excerpt from his message:

*Ech schécken der hei een heads-up: Mir lancéieren zesummen mat lovable.dev demnächst eng nei Initiativ déi dech kinnt interesséieren.

De LetzAI Playground: https://play.letz.ai/

Dat gëtt eng Gallery vu Micro Apps déi d’LetzAI API benotzen. Mir hu selwer wéis de do um Link gesäis schon eng Reih Apps gebaut, a mir fänken elo un aner Developeuren an Artisten ze sichen déi hir Applikatioun do wéilten gefeatured hunn. Si muss net mat lovable gebaut sinn, mee eis Erfahrung huet gewisen, dass et domadd am schnellste geet.*

I was fascinated by this new tool and created three applications for the LetzAI Playground: “Song Lyrics Illustrator”, “The Full Wine Glass Challenge”, and “Your Words, Your Vision”.

---

KI-Léierbud Prototype

After the launch at the end of May 2025 of the PLESK server and the WordPress CMS for the KI-Léierbud project, I used lovable.dev to create React prototypes for the “Knowledge”, “Quiz”, “Polls”, and “Hands-On” sections. I published detailed documentation on these projects in the internal “Development” section of the WordPress CMS (admin.ki-leierbud.lu). Unfortunately, I never received feedback from the partners.

I borrowed the term “Micro Apps” from Misch, and since my prototypes were more complex and larger than the LetzAI apps, I called them “Mini Apps”. I read online that this type of application and architecture are considered the future of dynamic websites.

---

Lovable.dev Contest

In mid-June 2025, lovable.dev organized a contest called “The AI Showdown”, where the company offered free access to its development environment over a weekend, providing three AI models: Anthropic Claude, Google Gemini, and OpenAI ChatGPT-4.

I defined two mini-applications:

• one for access to LuxASR, the Luxembourgish speech recognition project of the University of Luxembourg
• and one for restricted access to the randomuser.me test website.

The project names were “Lux-ASR Trial” and “Access-Brake-to-API”.
In total, there were six POCs, two prompts, and three AI models.

I evaluated the results of the six POCs according to several criteria and published them on LinkedIn:
👉 LinkedIn post

The winner was OpenAI, followed by Google. Anthropic came last. Of course, this evaluation is not representative.

Misch informed me that ChatGPT-5 is now integrated into lovable.dev. Unfortunately, my early-bird subscription at €20/month does not include this option. The current cheapest subscription costs €50/month.

---

VO POC “AI Image Generator”

Following discussions with Benedikt about the development tools used by Visual Online, he shared the link to his POC

https://animal-poc.ki-leierbud.lu

an AI Image Generator mini-app created with Django — as well as two references to operational websites built with Wagtail.

I tested the POC on my iPhone and I wondered why it was not created as “Mobile First” project, knowing that the main discussions between the partners in the past few weeks were related to this topic, including the discussions with Chris Weber.

VO Reference Websites

I tested both Visual Online reference web sites on my smartphone and noticed that the web pages does not comply to the “Mobile First” concept. It is true that the content is adapted to different screen sizes, but important functions are missing. Both web sites are “state of art” for the target use and audience, but the design does not support all the functionalities required for the KI-Léierbud portal.

---

Wagtail

After my mail-discussion with Benedikt a few days ago, I installed a Wagtail server on my Ubuntu Linux development desktop. The promise on the Wagtail website

https://wagtail.org

to set up a site in 10 minutes is not exaggerated. After pip install wagtail followed by a few Python commands, I was able to admire the homepage of my new site at http://127.0.0.1:8000/.

It is true that Wagtail is more modern and performant than WordPress, but it is still mainly a CMS. It is even possible to import WordPress content into Wagtail without major issues. The HTML source code generated by Wagtail sites is better structured than WordPress pages.

However, Wagtail has the same problem as WordPress: it is not optimized for delivering dynamic “Mobile First” web pages. On its own website, Wagtail recommends using it in headless mode (via REST API) with a REACT or Vue frontend.

---

Conclusions

Wagtail does not solve the urgent problem of developing REACT mini-applications powered by REST API from a headless CMS. If Visual Online considers it appropriate to quickly install a Wagtail CMS to eventually replace WordPress, I suggest proceeding as follows:

• For the “Knowledge” mini-applications, where a lot of content already exists in WordPress and where we plan to involve external authors, we continue the chosen path: a React application with WordPress REST API, to be developed by LetzAI based on my prototype presented and approved on 22.08.2025.
• For the “Quiz” and “Polls” mini-applications, where only a few examples are available until now, Visual Online can develop them in Wagtail, with a REST API interface for each application type (approx. 6 variants).
• For the “Hands-On” mini-applications, it will be decided on a case-by-case basis whether to build them in Wagtail or as standalone REACT app.

The CMS can also serve as a documentation center and as an accounting hub for our internal needs.

In a future step, we could migrate the WordPress content to Wagtail while adapting the REST API interface on both REACT and Wagtail sides to simplify the infrastructure.

But before taking a decision, we should take a deeper look at the concept of the mini-applications

---

Examples of Mini-Application Prototypes

To support understanding and decision-making, I present below a list of existing mini-applications, specifying the tools used to develop them, where they are hosted, and—where applicable—comments on their status.

RTL Multilingual News Reader

• created in November 2024
• hosted in the RTL Huggingface Account
• there are several dedicated news reader apps available
• runs on the OpenAI account of RTL
• needs an update and a conversion into a Hands-On mini-app with REACT

https://huggingface.co/spaces/rtllu/RTL_Multilingual_News_Reader

Text to interactive Heygen Avatar

• created a year ago
• implemented in the RTL Huggingface Account
• runs on my personal HeyGen Account
• high usage costs

https://github.com/mbarnig/Text_to_Avatar

Mäin éischt KI-Bild

• running in my Huggingface Account
• shared ZeroGPU (not always available)
• using costs included in my Huggingface Pro Account
• proposal to include this mini-app in the Hands-On KI-Léierbud apps

https://huggingface.co/spaces/mbarnig/My_first_AI_Image

AI Image Generator

• hosted in sub-domain app4.ki-leierbud.lu
• mini-App working with Huggingface API connected to my preceding app “Mäin éischt KI-Bild”
• created with lovable.dev early June 2025
• can be used as standalone mini-app when the AI model is implemented in the backend API server and GPU Worker
• can be hosted in /httpdocs sub-folder

https://app4.ki-leierbud.lu

Lyric Quiz : Human or AI

• hosted in sub-domain app5
• created with lovable.dev
• the layout with two articles in one page is not suitable ; I have to go back to an earlier version with one article per page
• the layout needs to be modified to comply with the approved template
• content fetched with REST API from WordPress
• can be easely converted into mini-app hosted in /httpdocs sub-folder

https://app5.ki-leierbud.lu

Easy Image Style Quiz : classification

• hosted in sub-domain app6
• created with lovable.dev
• the layout with two articles in one page is not suitable ; I have to go back to an earlier version with one article per page
• the layout needs to be modified to comply with the approved template
• content fetched with REST API from WordPress
• Moderate and Difficult quiz versions also available
• can be easely converted into mini-app hosted in /httpdocs sub-folder

https://app6.ki-leierbud.lu

Bits & Bytes Quiz : multiple choice

• hosted in sub-domain app7
• created with lovable.dev
• the layout with two articles in one page is not suitable ; I have to go back to an earlier version with one article per page
• the layout needs to be modified to comply with the approved template
• content fetched with REST API from WordPress
• can be easely converted into mini-app hosted in /httpdocs sub-folder

https://app7.ki-leierbud.lu

KI-Léierbud : what, why, when, who, .. (Knowledge)

• hosted in sub-domain app8
• created with lovable.dev
• can be used to test a working language switching
• the layout with two articles in one page is not suitable ; I have to go back to an earlier version with one article per page
• the layout needs to be modified to comply with the approved template
• content fetched with REST API from WordPress
• can be easely converted into mini-app hosted in /httpdocs sub-folder

https://app8.ki-leierbud.lu

Hello World php Trial

• hosted in sub-domain app9
• test related to my development of a WordPress plugin
• abandoned track

https://app9.ki-leierbud.lu

AI-Agent-Café

• mini-app developed by Olivier Koos
• code available on Github : https://github.com/koosoli/AI-Agent-Cafe
• working standalone mini application

https://ki-leierbud.lu/ai-cafe

Hello World Tutorial

• mini-app developed by me
• minimal working standalone test mini application

https://ki-leierbud.lu/helloworld

LetzAI Image Generator

• mini-app developed by me
• minimal working standalone test mini application
• image above generated with prompt “dog”

https://ki-leierbud.lu/letzai

Visionaries (Knowledge)

• Prototype index.html, assets/app.js, assets/app.css developed with the assistance of ChatGPT-5
• working knowledge mini-app
• can be used for all knowledge sequences with the URL suffix /?id=ID
• can be used for language change with the URL suffix /?lang=xx
• approved template for knowledge sequences
• different knowledge mini-apps can be defined by changing the first english article ID of a sequence inside the app.js file

https://ki-leierbud.lu/knowledge/visionaries/

Record & Transcribe Speech

• use of the Lux-ASR API
• developed with lovable.dev in June 2025 during the AI Showdown
• standalone mini-app
• hosted at lovable.app
• can be easely converted to a standalone mini-app in a folder inside the PLESK root /httpdocs

https://openai-speak-luxasr.lovable.app

In my other contributions

https://admin.ki-leierbud.lu/archives/1996

https://admin.ki-leierbud.lu/archives/2220

I will present more infos about the mini-applications and the Figma design.

Inventory of KI-Léierbud portal components:

1. PLESK Server
https://plesk06.vo.lu:8443/
Version: Obsidian 18.0.712
OS: AlmaLinux 96 x86-64

2. WORDPRESS CMS
https://admin.ki-leierbud.lu
Version: 6.8.2

3. KI-Léierbud Prototype
https://ki-leierbud.lu

4. KI-Léierbud Design Mockup
https://www.figma.com/design/1f98BTttNHQk5EU2vTYWAp/KI-LEIERBUD

5. KI-Léierbud Dot Icons Design
https://21st.dev/paceui/dot-loader/default

6. Backend API Server (Docker, JWT, OpenAI, NestJS)
IP: 85.93.210.120
https://github.com/ki-leierbud/api

7. Backend GPU Worker
LetzAI AI Models

8. Frontend Navigation + Mini-Applications (multilingual)
https://ki-leierbud.lu
https://ki-leierbud.lu/about.html
https://ki-leierbud.lu/contact.html
https://ki-leierbud.lu/faq.html
……

https://ki-leierbud.lu/knowledge/visionaries/
https://ki-leierbud.lu/knowledge/bits-bytes/
https://ki-leierbud.lu/knowledge/applications/
……

https://ki-leierbud.lu/quiz/real-ai/
https://ki-leierbud.lu/quiz/image-style/
https://ki-leierbud.lu/quiz/ai-timeline/
……

https://ki-leierbud.lu/polls/feelings/
https://ki-leierbud.lu/polls/opinions/
https://ki-leierbud.lu/polls/ai-in-schools/
……

https://ki-leierbud.lu/handson/my-first-image/
https://ki-leierbud.lu/handson/music-maker/
https://ki-leierbud.lu/handson/news-search/
……

It may be necessary to add subfolders within the different categories to manage difficulty levels.

9. Templates for mini-applications
For the knowledge, quiz, and polls categories, a total of about 7 different templates are needed:
* one for knowledge
* three for quiz
* three for polls
To customize a mini-application from a template, it is sufficient to specify the first WordPress article ID and, where applicable, parameters that cannot be managed through the REST API. Templates must be extended to support login when access to specific mini-applications is required.
For the HandsOn category, it is more difficult to use templates for mini-applications because of the variety of required functionalities. It is certainly possible to define sub-templates for certain tasks, but overall, the development of a custom mini-application should be considered for each HandsOn example.

I have added the code for several mini-applications to the GitHub repository, which can serve as examples and references for developing templates or custom mini-applications.

https://github.com/orgs/ki-leierbud/repositories (edited) 

More recent informations about the development of templates is provided in my contribution

admin.ki-leierbud.lu/archives/2107

10. Conference Room for Partner Meetings
made available by Visual Online
parking before the building
large screen with computer interface
free coffee and drinks offered

Inventory of available KI-Léierbud project tools :

a) DNS Server/Stock
https://hosting.vo.lu/fr/domaines/domaines/

b) Data Loss Protection
Daily server backup copies

c) Sentry Logs Checking
https://sentry.io/welcome/

d) Video Meetings Host
https://meet.vo.lu/KIL

e) Fiche descriptive KI-Léierbud

https://ki-leierbud.lu/documents/KI-Leierbud-promo-4.pdf

f) Messaging Service Slacks
made available by LetzAI
https://en.wikipedia.org/wiki/Slack_(software)
https://slack.com/intl/fr-fr

Inventory of Required Additional Components, Tools, and Tasks for the KI-Léierbud Project

A) Mail Server (Component)
To be set up shortly.

B) VoIP Interface (Component)
To be scheduled for the end of 2025.

C) Documentation Center (Tool)
Currently, project documentation for the development and management of KI-Léierbud is scattered across multiple locations:

• In the private development section of the WordPress server: https://admin.ki-leierbud.lu/ (I suspect few, if any, have read these articles and links so far)
• In individual emails and PDF documents
• In the Slack messaging platform
• In the KI-Léierbud GitHub account
• In my personal GitHub account
• On my personal website https://web3.lu/

It is urgent to define a single, centralized documentation hub for the project. We must decide whether development-related information should be open-source or restricted, and then select the most appropriate hosting platform.
To be set up shortly.

D) Accounting Center (Tool)
To my knowledge, we have not yet started a transparent accounting process for the costs and investments related to the KI-Léierbud project. Significant work has been done since the official start date, 1 July 2025.
While it is clear that this information will not be open-source, we must provide it to the ministry. I recommend:

• Listing all costs incurred to date
• Sharing the data among partners
• Hosting it on a protected platform so it can be reviewed by the ministry’s comité de suivi

To be set up shortly.

E) User Support Center (Task)

• Provide user support via telephone, email, and chatbot

To be in place for the portal launch in mid-October 2025.

F) Content Management (Task)

• Appoint authors, editors, translators, and other contributors to create content for the mini-applications

To be defined shortly.

G) Team Management (Task)

• Assign team members responsible for managing the different components and tools, and for executing related tasks
• Schedule regular video meetings with all responsible parties to track project progress
• Produce written reports summarizing meeting results (possibly assisted by AI tools using meeting recordings)

To start shortly.

H) Statistics (Task)

• Collect and process data to produce statistics for both internal and external distribution

To be set up for the portal launch in mid-October 2025.

Mini-Applications in KI-Léierbud

Marco Barnig, 18.8.2025

Mini-applications are the core of the KI-Léierbud portal. They consist of the following elements:

1. A sequence of web pages with content downloaded via REST API from the KI-Léierbud WordPress server for the “knowledge,” “quiz,” and “polls” mini-applications, and individual interactive web pages for the “hands-on” applications.

2. A set of html, css, js, svg, and png files, structured as follows:

project-root/
├─ section/
│  └─ app-name/
│     ├─ index.html
│     └─ assets/ (css/js/svg…)
└─ operations/
   ├─ login/
   │  └─ index.html
   └─ search/
      └─ index.html

These directories are preferably stored in the /httpdocs/ folder of the PLESK server. If necessary, they may be installed in specific subdomains of ki-leierbud.lu for technical reasons.

3. Graphic cards with an illustration and description of the mini-application (similar to the LetzAI prompt cards) that are displayed in the portal dashboard. Besides promoting the KI-Léierbud on social networks, they are also used as the first and last card in the web page sequences described in point 1.

Layout and Features of the Mini-Applications

The layout of the “knowledge,” “quiz,” and “polls” mini-applications is template-based.

• A single template is sufficient for the “knowledge” sequences (different background colors may optionally be chosen depending on the intended user level).
• Three templates are required for the “quiz” sequences, depending on the quiz type (yes/no, multiple choice, etc.). The same number of 3 also seems appropriate to standardize the “polls.”
• All templates are based on a common Master-Template with header and footer

Mini-Application “Knowledge/Visionaries”

The “Visionaries” mini-application serves as an example to present the typical layout and features of a “Knowledge” mini-application.

A functional prototype of this mini-application is available at:

https://ki-leierbud.lu/knowledge/visionaries

A detailed screenshot of one page from the related sequence is shown below:

Some other pages are assembled in the second figure below:

The following figure shows the sequence of web pages displayed on a mobile device in the “Visionaries” sequence:

You can directly access a specific page, for example the French page about Harold Cohen with ID=1501, by adding the suffix ?id=1501 to the URL:

https://ki-leierbud.lu/knowledge/visionaries/?id=1501

You can also retrieve a page in a specific language by adding the suffix ?lang=xx to the URL of an existing page in another language. If the page does not exist in the desired language xx, the following priority order will be applied: en, fr, de, pt, lb.

Development of the “Knowledge” Template

The template for the “Knowledge” mini-application was developed within two days using ChatGPT-5. The complete conversation from start to finish is available at the following shared link:

https://chatgpt.com/share/68a6f4e5-58ac-8005-9db8-74577cd58ba0

Reading this conversation should enable non-technical collaborators to quickly become familiar with development assisted by ChatGPT-5 and to develop templates for mini-applications themselves.

Remaining Errors in the “Knowledge” Template

The “Knowledge” mini-application template still contains a few residual errors, especially on mobile phones. One issue is that the width of the header and footer exceeds the screen width in portrait mode. Another issue is that the “swipe” function has not yet been implemented. However, by rotating the mobile device to landscape mode, one can still test all the features. The language handling for accessing a specific page also still requires some adjustment.

I plan to fix these issues once the layout and features have been definitively approved by the partners.

Mini-Application “The People Who Shaped AI”

Comments and explanations by Marco Barnig

1. Figma

Since I was not familiar with Figma until recently, it took me a while to understand that it is a powerful digital tool for illustrating the layout of a website.

Back in 1997, when I created my first static website on the Webplaza of the Telecommunications Division of the P&T public company, I regularly sketched page layouts on squared paper. Most of my ideas came to me at night—during dreams or bouts of insomnia. I would get up, quickly draw a sketch on paper, and then return to bed to fall asleep again.

2. Collaboration Across Generations

To facilitate collaboration and mutual understanding between the different generations involved in the KI-Léierbud project, I tried to design wireframes in my baby-boomer style as an example in Figma, starting with Alan Turing.

3. Wireframe “Alan Turing”

My original idea for the functional wireframe of the “Alan Turing” page is shown below:

4. Mockup “Alan Turing”

My original idea for the graphical mockup of the “Alan Turing” page is presented in the following figure.

I limited myself to defining a harmonious palette of three colors—used respectively for the top and bottom fixed bars and for the central content area.

5. Interactive Prototype “Alan Turing”

I added the image and text for “Alan Turing” into the WordPress CMS under a new category: knowledge/visionaries.
The ID of the first article is 1961. I extended the existing prototype URL https://app8.ki-leierbud.lu with the parameter /?p=1961&color=ocean.
The content displayed in the browser looks as follows:

6. Revised Wireframes and Mockups “Alan Turing”

Based on the Figma mockup proposed by Sumin, and in order to support all the required functionalities, I revised the functional and graphical wireframes as follows:

7. Interactive Prototype of the Mini-Application “The People Who Shaped AI”

To demonstrate the practical operation of the “Alan Turing” page and its integration within the mini-application “The People Who Shaped AI”, I added a few more visionaries and pioneers, as well as a first and last page, into the WordPress CMS.

I also created a new JSON file with a uniform black color palette.

My plan is to adapt the code and host it at:

https://ki-leierbud.lu/knowledge/visionaries/

In the meantime, it can be tested with the current code at:

https://app8.ki-leierbud.lu/?p=1988&color=black