Skip to content

Commit c798761

Browse files
committed
Update MaaS README and docker compose
1 parent c4777ce commit c798761

File tree

3 files changed

+76
-90
lines changed

3 files changed

+76
-90
lines changed

docker-compose.yml

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
version: "3.7"
22

33
services:
4-
app:
4+
plantala-app:
55
container_name: plantala-app
66
build:
77
context: .
@@ -14,12 +14,11 @@ services:
1414
environment:
1515
- CHOKIDAR_USEPOLLING=true
1616
stdin_open: true
17+
restart: always
1718

18-
media-data:
19+
plantala-media-data:
1920
container_name: plantala-media-data
20-
build:
21-
context: medienstationAsAService
22-
dockerfile: Dockerfile
21+
image: danielgatis/rembg
2322
volumes:
24-
- ./public/images:/mediaData
25-
command: -p /mediaData/input /mediaData
23+
- ./public/images:/rembg
24+
command: "p ./input ."

medienstationAsAService/Dockerfile

Lines changed: 0 additions & 15 deletions
This file was deleted.

medienstationAsAService/README.md

Lines changed: 70 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,138 @@
1-
# Medienstation as a Service - MaaS
2-
3-
The _Media Station as a Service_ (MaaS) offers you a simple way to combine the advantages of Plantala with your own images. Semi-automated steps help you integrate your data and customize the media station to your liking, even without deep technical knowledge.
1+
# Media station as a Service (MaaS)
42

3+
The _Media station as a Service_ (MaaS) offers a simple and user-friendly way to create a media station by combining the power of Plantala with your own images. Semi-automated processes allow you to integrate your data and customize the media station without deep technical knowledge.
54
## Features
65

7-
✅ Create your own media station in just 3 steps.
6+
✅ Create your own media station in just 3 simple steps.
87

9-
Automated image import and background removal.
8+
Automatic image import and background removal.
109

11-
Supported data editing and adding background information.
10+
Edit and add background information for your media content.
1211

13-
Colors are analyzed based on your starting image.
12+
Automatic color scheme based on your starting image.
1413

15-
✅ Customizable color scheme for the media station.
14+
✅ Customizable color themes for the media station.
1615

17-
Enjoy a visually pleasing way to convey information with your data.
16+
Display information with a clean and visually appealing design.
1817

1918
# TL;DR
2019

21-
🚀 Copy your images to the `public/images/input` folder and design a logo `public/images/logo.png`, as well as a starting image `public/images/start.png`.
22-
23-
🚀 Start the media station with `docker-compose up -d --build`.
20+
🚀 Step 1: Copy your images to the `public/images/input` folder, and add a logo (`public/images/logo.png`) and a starting image (`public/images/start.png`).
21+
22+
🚀 Step 2: Start the media station with `docker-compose up -d --build`.
2423

25-
🚀 Generate media data with `docker exec -d plantala-app npm run media-data` and edit background information for images and color values for your media station in `public/mediaData.js`.
24+
🚀Step 3: Generate media data with `docker exec -d plantala-app npm run media-data`, then edit public/mediaData.js for background info and color customization.
2625

27-
# Creating Your Own Media Station in 3 Steps
26+
# Creating Your Own Media Station in 3 Simple Steps
2827

29-
You can create your own media station in three simple steps.
28+
You can create your own media station in three easy steps.
3029

31-
1. Copy Images
30+
1. Copy Your Images
3231
2. Start the Media Station
33-
3. Customize Images and Information
32+
3. Customize Your Media Data & Color Scheme
3433

3534
---
3635

37-
## Step 1. Copy Your Images 🎨
36+
## Step 1: Copy Your Images 🎨
37+
38+
First, copy all the images you want to use to the `public/images/input` folder. These images will automatically have their backgrounds removed when you start the media station.
3839

39-
First, copy all your images to the `public/images/input` folder. All images will be automatically clipped (i.e., the background will be removed) when you start the media station and will be included in it.
40+
Guidelines for Images:
4041

41-
Please note the following guidelines for your images:
42+
For best results, each image should contain a single object on a solid background.
43+
The filename of each image will be used as the title in the media station, so name your files accordingly.
4244

43-
- For the best results, use a single object with a solid background in each image.
44-
- The filename will be used as the title of the images in the media station. Please name the images according to the depicted object.
45+
Additionally, you’ll need a logo and a starting image. These should be placed directly in the `public/images` folder:
4546

46-
In addition, your media station needs a logo and a starting image. These two images do not need to be clipped and can be directly inserted into the `public/images` folder (not `public/images/input`) as `logo.png` and `start.png`, respectively.
47+
logo.png: Your logo for the media station.
48+
start.png: The starting image, which will be used to generate the color scheme.
4749

48-
Once this is done, you can start your media station.
50+
## Step 2: Start the Media Station 🚀
4951

50-
## Step 2. Start the Media Station 🚀
52+
To run your media station, you'll need _Docker_, which is a tool that lets you run applications in isolated environments called containers.
5153

52-
To start the media station, an application called _Docker_ is used. In simplified terms, _Docker_ is like another computer on your computer, allowing you to access the media station and initiate the removal of backgrounds from all your copied images.
54+
Steps to Install and Start _Docker_:
5355

54-
_Docker_ automatically installs all the necessary libraries when you start it. So, you don't need to install any additional applications on your computer except for _Docker_. To install it, click on [Install Docker](https://docs.docker.com/get-docker/) and select your operating system.
56+
1. Install _Docker_: Follow the instructions at [Install Docker](https://docs.docker.com/get-docker/) for your operating system.
5557

56-
After the installation is complete, you can start your media station with the following command in the terminal:
58+
2. Start the media station: Once _Docker_ is installed, open your terminal and run:
5759

5860
```
59-
docker-compose up -d --build
61+
docker-compose up -d --build
6062
```
6163

62-
This will start two containers. The _plantala-media-data_ container removes the backgrounds from all your copied images and then terminates.
64+
This command will start two services:
6365

64-
The _plantala-app_ container contains the complete media station and can be accessed on your computer at [this link](http://localhost:3000/).
66+
1. plantala-media-data: Automatically removes the backgrounds from your images.
67+
2. plantala-app: Hosts the media station, accessible at http://localhost:3000/.
6568

66-
Congratulations, your media station is now visible. To have all your images and information appear in it, one more third and final step is needed.
69+
Your media station is now live, but there's one more step to finalize it.
6770

68-
## Step 3: Adding Background Information & Customizing the Color Scheme 🎨
71+
## Step 3: Add Background Information & Customize the Color Scheme 🎨
6972

70-
Your copied images have all been clipped in the background and are now located next to your logo and starting image in the `public/images` folder.
73+
After the background removal process, your images will be placed in the public/images folder (alongside logo.png and start.png). Now, it’s time to display them in the media station and customize the color scheme.
7174

72-
To display the images in the media station, update the media data.
75+
Generate Media Data:
7376

74-
This is done with the terminal command:
77+
Run the following command in your terminal to generate the media data for your station:
7578

7679
```
7780
docker exec -d plantala-app npm run media-data
7881
```
7982

80-
Open the link to your media station again [with this link](http://localhost:3000/).
83+
After this, open the media station again [with this link](http://localhost:3000/), and you should see all your images.
8184

82-
All your images will now appear in the media station. Furthermore, your logo and starting image will be visible. This starting image has also changed the color scheme of the media station. The most significant colors from the starting image are now used as primary and secondary colors.
85+
Customizing the Color Scheme:
8386

84-
You are welcome to make adjustments to the newly generated media data in `public/mediaData.js`.
85-
86-
A total of 7 colors have been derived from the starting image. The color values are given as 6-digit web colors with a leading hash symbol (#). You can choose your preferred color and customize each color value using the [Colordot website](https://color.hailpixel.com/).
87-
88-
Here's what each color value represents:
87+
The media station’s color scheme is automatically derived from the starting image (start.png), but you can further customize it. The generated media data is saved in _public/mediaData.js_, which includes colors based on the starting image.
88+
Example Color Configuration:
8989

9090
```
91-
const primaryColor = '#799160'; // Primary color of the media station
92-
const secondaryColor = '#e0bf96'; // Secondary color of the media station
93-
const backgroundColor = '#faebd7'; // Background color of the media station
94-
const textColor = '#341419'; // Text color of the media station
95-
const errorColor = '#f3aa1e'; // Color for error messages within the media station
96-
const infoColor = '#ab465a'; // Color for info messages within the media station
97-
const successColor = '#f3aa1e'; // Color for success messages within the media station
91+
const primaryColor = '#799160'; // Primary color
92+
const secondaryColor = '#e0bf96'; // Secondary color
93+
const backgroundColor = '#faebd7'; // Background color
94+
const textColor = '#341419'; // Text color
95+
const errorColor = '#f3aa1e'; // Error message color
96+
const infoColor = '#ab465a'; // Info message color
97+
const successColor = '#f3aa1e'; // Success message color
9898
```
9999

100-
The media data also includes all clipped images. You can make adjustments here as well.
100+
You can customize these colors using any hex color value. For easy color selection, use the [Colordot website](https://color.hailpixel.com/)..
101+
Additional Customization:
101102

102-
If you are familiar with file paths, you can make adjustments under _source_.
103+
In public/mediaData.js, you can also update the following details for each image:
103104

104-
For each image, the following 5 elements are provided:
105+
_name_: Title of the image (derived from the file name).
106+
_source_: The file path to the clipped image.
107+
_description_: A short description of the image.
108+
_link_: An optional external link (e.g., a reference to the original content).
109+
_wiki_: An optional link to Wikipedia or similar resources.
105110

106-
- _name_ is the image title derived from the file name for the media station.
107-
- _source_ is the technical path to the clipped image.
108-
- _description_ is the description text for the image as displayed in the media station.
109-
- _link_ provides the option to specify an external reference, such as a link to the original document.
110-
- _wiki_ provides the option to include a link to Wikimedia or similar.
111+
Any changes you make will be immediately visible in the media station after refreshing the page.
111112

112-
All your adjustments will be immediately displayed in the media station. To do so, open the link to your media station again [with this link](http://localhost:3000/).
113+
# You're Done! Your Media Station Is Ready 🎉
113114

114-
## You're done. Your media station can now be deployed 🎉
115+
Congratulations! Your media station is now live, and you can access it [here](http://localhost:3000/).
115116

116-
Great! Your media station is ready, and you can view it [here](http://localhost:3000/).
117-
To share the media station with others, you can export it.
117+
Exporting the Media Station:
118118

119-
To do this, use _Docker_ again with the following command:
119+
If you want to share or deploy your media station, you can export it with this command:
120120

121121
```
122122
docker exec -d plantala-app npm run build
123123
```
124124

125-
Your media station will be exported in two variants for you:
125+
This will create two versions:
126+
127+
1. A Node.js-supported production application in the .next folder for hosting on your server.
128+
2. A static HTML version in the out folder, which can be hosted without a Node.js server.
126129

127-
1. As a Node.js-supported production application in the `.next` folder for your own server.
128-
2. As static HTML in the `out` folder, which can run independently (without a Node.js server).
130+
Stopping the Media Station:
129131

130-
Once you are satisfied with all the customizations of your media station and have successfully exported it, you can stop the _Docker_ containers with the following command:
132+
When you're done, you can stop the media station using:
131133

132134
```
133135
docker-compose stop
134136
```
135137

136-
And now, enjoy your media station!
138+
Enjoy your media station!

0 commit comments

Comments
 (0)