🧱 Objects

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# GitHub raw path for public images
RAW_GITHUB = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/clothing"

# Use local directory only to get item names
LOCAL_CLOTHING_PATH = os.path.abspath("../assets_github/object/clothing")
CLOTHING_ITEMS = sorted([
    item for item in os.listdir(LOCAL_CLOTHING_PATH)
    if os.path.isdir(os.path.join(LOCAL_CLOTHING_PATH, item))
])

# Build public GitHub image URLs
clothing_images = {
    item: sorted([
        f"{RAW_GITHUB}/{item}/{img}"
        for img in os.listdir(os.path.join(LOCAL_CLOTHING_PATH, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png", ".webp"))
    ])
    for item in CLOTHING_ITEMS
}

# App configuration
app = JupyterDash(__name__)
app.title = "👕 Clothing Carousel"

app.layout = html.Div([
    html.H2("👕 Clothing Carousel", style={
        "textAlign": "center", "marginBottom": "10px", "marginTop": "5px",
        "fontSize": "22px", "fontWeight": "bold", "fontFamily": "Georgia, serif"
    }),

    html.Div([
        html.Label("Select clothing item:", style={
            "fontSize": "16px", "marginBottom": "6px", "fontFamily": "Georgia, serif"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in CLOTHING_ITEMS],
            value=CLOTHING_ITEMS[0] if CLOTHING_ITEMS else None,
            clearable=False,
            style={"width": "300px", "margin": "0 auto", "fontFamily": "Georgia, serif"}
        )
    ], style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
], style={"fontFamily": "Georgia, serif", "padding": "20px"})


# Update carousel
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = clothing_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])
    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "15px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "15px"}),
        ], style={"display": "flex", "justifyContent": "center", "alignItems": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),

        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontFamily": "Georgia, serif", "color": "#444"})
    ])


# Navigation logic
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"


# Run the app
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=8170)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# GitHub raw URL base for public image access
GITHUB_BASE_URL = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github"

# Local folder only for listing filenames
LOCAL_DECORATION_PATH = os.path.abspath("../assets_github/object/decoration")
DECORATION_ITEMS = sorted([
    item for item in os.listdir(LOCAL_DECORATION_PATH)
    if os.path.isdir(os.path.join(LOCAL_DECORATION_PATH, item))
])

# Dictionary {item: list of GitHub image URLs}
decoration_images = {
    item: sorted([
        f"{GITHUB_BASE_URL}/object/decoration/{item}/{img}"
        for img in os.listdir(os.path.join(LOCAL_DECORATION_PATH, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png"))
    ])
    for item in DECORATION_ITEMS
}

# Layout
app = JupyterDash(__name__)
app.title = "🎀 Decoration Carousel"

app.layout = html.Div([
    html.H2("🎀 Decoration Carousel", style={
        "textAlign": "center", "marginBottom": "25px", "marginTop": "10px",
        "fontSize": "22px", "fontWeight": "bold", "fontFamily": "Georgia, serif"
    }),

    html.Div([
        html.Label("Select decoration item:", style={
            "fontSize": "16px", "marginBottom": "6px", "fontFamily": "Georgia, serif"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{
                "label": item.replace("_", " ").capitalize(),
                "value": item
            } for item in DECORATION_ITEMS],
            value=DECORATION_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto", "fontFamily": "Georgia, serif"}
        )
    ], style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
], style={"fontFamily": "Georgia, serif", "padding": "20px"})


# Update the carousel
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = decoration_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])
    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "15px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "15px"}),
        ], style={"display": "flex", "justifyContent": "center", "alignItems": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontFamily": "Georgia, serif", "color": "#444"})
    ])


# 🔁 Arrow navigation
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"


#  Run the app
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=8204)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# Dash config for public GitHub assets
GITHUB_RAW_BASE = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github"

app = JupyterDash(__name__)
app.title = "🍽️ Food & Produce Carousel"

# Local paths to locate categories
CATEGORY_MAP = {
    "Prepared food": "../assets_github/object/food/prepared",
    "Fruit": "../assets_github/object/food/produce/fruit",
    "Vegetable": "../assets_github/object/food/produce/vegetable"
}

# Find subcategories
category_items = {
    label: sorted([
        item for item in os.listdir(path)
        if os.path.isdir(os.path.join(path, item))
    ])
    for label, path in CATEGORY_MAP.items()
}

# Build { (category, item): [image URLs from GitHub] }
image_lookup = {}
for category, local_path in CATEGORY_MAP.items():
    for item in category_items[category]:
        full_path = os.path.join(local_path, item)
        github_path = f"{GITHUB_RAW_BASE}/object/food"
        if category == "Prepared food":
            github_path += f"/prepared/{item}"
        else:
            github_path += f"/produce/{category.lower()}/{item}"
        image_lookup[(category, item)] = sorted([
            f"{github_path}/{img}"
            for img in os.listdir(full_path)
            if img.lower().endswith((".jpg", ".jpeg", ".png", ".webp"))
        ])

# Layout
app.layout = html.Div([
    html.H2("🍽️ Food & Produce Carousel", style={
        "textAlign": "center", "marginBottom": "10px", "marginTop": "5px",
        "fontSize": "22px", "fontWeight": "bold", "fontFamily": "Georgia, serif"
    }),

    html.Div([
        html.Label("Select category:", style={"fontWeight": "bold", "marginBottom": "6px"}),
        dcc.Dropdown(
            id='category-dropdown',
            options=[{"label": cat, "value": cat} for cat in CATEGORY_MAP],
            value="Prepared food",
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "16px"}),

    html.Div(id='item-dropdown-container', style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Dynamically update item dropdown
@app.callback(
    Output('item-dropdown-container', 'children'),
    Input('category-dropdown', 'value')
)
def update_item_dropdown(category):
    items = category_items.get(category, [])
    return html.Div([
        html.Label("Select item:", style={"fontWeight": "bold", "marginBottom": "6px"}),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in items],
            value=items[0] if items else None,
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ])

# Update carousel
@app.callback(
    Output('carousel-container', 'children'),
    Input('category-dropdown', 'value'),
    Input('item-dropdown', 'value')
)
def update_carousel(category, item):
    images = image_lookup.get((category, item), [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])
    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "409px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "12px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "13px", "fontStyle": "italic", "fontFamily": "Georgia, serif"})
    ])

# Navigation arrows
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=5802)

from dash import Dash, dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# Dash setup for GitHub-styled app
app = JupyterDash(
    __name__,
    assets_folder=os.path.abspath("../assets_github"),
    assets_url_path="/assets_github"
)
app.title = "🪑 Furniture Carousel"

# GitHub base URL for raw images
GITHUB_BASE_URL = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/furniture"

# Local folder to list the categories
FURNITURE_DIR = os.path.abspath("../assets_github/object/furniture")

# Furniture categories
FURNITURE_ITEMS = sorted([
    item for item in os.listdir(FURNITURE_DIR)
    if os.path.isdir(os.path.join(FURNITURE_DIR, item))
])

# Dictionary: {category: [GitHub image URLs]}
furniture_images = {
    item: sorted([
        f"{GITHUB_BASE_URL}/{item}/{img}"
        for img in os.listdir(os.path.join(FURNITURE_DIR, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png", ".webp"))
    ])
    for item in FURNITURE_ITEMS
}

# Layout
app.layout = html.Div([
    html.H2("🪑 Furniture Carousel", style={
        "textAlign": "center", "marginBottom": "10px", "marginTop": "5px",
        "fontSize": "22px", "fontWeight": "bold", "fontFamily": "Georgia, serif"
    }),

    html.Div([
        html.Label("Select furniture item:", style={
            "fontWeight": "normal", "display": "block", "marginBottom": "6px",
            "fontSize": "15px", "fontFamily": "Georgia, serif"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in FURNITURE_ITEMS],
            value=FURNITURE_ITEMS[0] if FURNITURE_ITEMS else None,
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Carousel content
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = furniture_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])
    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),

            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),

            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),

        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic", "fontFamily": "Georgia, serif"})
    ])

# Navigation logic
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=8125)

from dash import Dash, dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# GitHub-style asset config (for styling, not images)
app = JupyterDash(
    __name__,
    assets_folder=os.path.abspath("../assets_github"),
    assets_url_path="/assets_github"
)
app.title = "🎮 Game Carousel"

# GitHub raw base path for image display
GITHUB_BASE_URL = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/game"

# Local game folder just to list categories and images
GAME_PATH = os.path.abspath("../assets_github/object/game")

# Game categories
GAME_ITEMS = sorted([
    item for item in os.listdir(GAME_PATH)
    if os.path.isdir(os.path.join(GAME_PATH, item))
])

# Dictionary of {game: [GitHub image URLs]}
game_images = {
    item: sorted([
        f"{GITHUB_BASE_URL}/{item}/{img}"
        for img in os.listdir(os.path.join(GAME_PATH, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png", ".webp"))
    ])
    for item in GAME_ITEMS
}

# Layout
app.layout = html.Div([
    html.H2("🎮 Game Carousel", style={
        "textAlign": "center", "marginBottom": "25px", "marginTop": "10px",
        "fontSize": "22px", "fontWeight": "bold", "fontFamily": "Georgia, serif"
    }),

    html.Div([
        html.Label("Select game item:", style={
            "fontWeight": "normal", "display": "block", "marginBottom": "6px",
            "fontSize": "15px", "fontFamily": "Georgia, serif"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in GAME_ITEMS],
            value=GAME_ITEMS[0] if GAME_ITEMS else None,
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Carousel content display
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = game_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])
    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic", "fontFamily": "Georgia, serif"})
    ])

# Navigation arrows logic
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Launch app
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=8160)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# GitHub-based assets path for Dash 
app = JupyterDash(
    __name__,
    assets_folder=os.path.abspath("../assets_github"),  # Styling, not image hosting
    assets_url_path="/assets_github"
)
app.title = "🧺 Household Appliance Carousel"

# GitHub raw base URL
GITHUB_BASE_URL = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/household_appliance"

# Local image folder (only used to list files)
APPLIANCE_PATH = os.path.abspath("../assets_github/object/household_appliance")
APPLIANCE_ITEMS = sorted([
    item for item in os.listdir(APPLIANCE_PATH)
    if os.path.isdir(os.path.join(APPLIANCE_PATH, item))
])

# Dictionary of public GitHub image URLs
appliance_images = {
    item: sorted([
        f"{GITHUB_BASE_URL}/{item}/{img}"
        for img in os.listdir(os.path.join(APPLIANCE_PATH, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png", ".webp"))
    ])
    for item in APPLIANCE_ITEMS
}

# Layout
app.layout = html.Div([
    html.H2("🧺 Household Appliance Carousel", style={
        "textAlign": "center", "marginBottom": "10px", "marginTop": "5px",
        "fontSize": "22px", "fontWeight": "bold", "fontFamily": "Georgia, serif"
    }),

    html.Div([
        html.Label("Select appliance:", style={
            "fontWeight": "normal", "display": "block", "marginBottom": "6px",
            "fontSize": "15px", "fontFamily": "Georgia, serif"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in APPLIANCE_ITEMS],
            value=APPLIANCE_ITEMS[0] if APPLIANCE_ITEMS else None,
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Update carousel
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = appliance_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])
    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic", "fontFamily": "Georgia, serif"})
    ])

# Navigation
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run app
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=8163)

from dash import Dash, dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# Configuration Dash 
app = JupyterDash(
    __name__,
    assets_folder=os.path.abspath("../assets_github"),
    assets_url_path="/assets_github"
)
app.title = "⚡ Electronic Device Carousel"

# GitHub raw image base URL
GITHUB_BASE_URL = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/electronic_device"

# Local file system path to loop over categories
ELECTRONIC_PATH = os.path.abspath("../assets_github/object/electronic_device")
ELECTRONIC_ITEMS = sorted([
    item for item in os.listdir(ELECTRONIC_PATH)
    if os.path.isdir(os.path.join(ELECTRONIC_PATH, item))
])

# Build dict with GitHub-based URLs
electronic_images = {
    item: sorted([
        f"{GITHUB_BASE_URL}/{item}/{img}"
        for img in os.listdir(os.path.join(ELECTRONIC_PATH, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png", ".webp"))
    ])
    for item in ELECTRONIC_ITEMS
}

# Layout
app.layout = html.Div([
    html.H2("⚡ Electronic Device Carousel", style={
        "textAlign": "center", "marginBottom": "10px", "marginTop": "5px",
        "fontSize": "22px", "fontWeight": "bold", "fontFamily": "Georgia, serif"
    }),

    html.Div([
        html.Label("Select electronic device:", style={
            "marginBottom": "6px", "fontSize": "15px", "fontStyle": "normal"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in ELECTRONIC_ITEMS],
            value=ELECTRONIC_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Carousel update on dropdown change
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = electronic_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])
    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "15px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),

        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "13px", "fontFamily": "Georgia, serif"})
    ])

# Arrows logic
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run app
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=8806)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# Dash config 
app = JupyterDash(__name__)
app.title = "🍽️ Kitchenware Carousel"

# GitHub base path 
GITHUB_BASE_URL = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/kitchenware"

# Path to local kitchenware directory to list folders
LOCAL_KITCHENWARE_DIR = os.path.abspath("../assets_github/object/kitchenware")
KITCHENWARE_ITEMS = sorted([
    item for item in os.listdir(LOCAL_KITCHENWARE_DIR)
    if os.path.isdir(os.path.join(LOCAL_KITCHENWARE_DIR, item))
])

# Dict {item: [full public GitHub image URLs]}
kitchenware_images = {
    item: sorted([
        f"{GITHUB_BASE_URL}/{item}/{img}"
        for img in os.listdir(os.path.join(LOCAL_KITCHENWARE_DIR, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png", ".webp"))
    ])
    for item in KITCHENWARE_ITEMS
}

# Layout
app.layout = html.Div([
    html.H2("🍽️ Kitchenware Carousel", style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div([
        html.Label("Select kitchenware item:", style={
            "fontWeight": "normal", "display": "block", "marginBottom": "8px"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in KITCHENWARE_ITEMS],
            value=KITCHENWARE_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Update carousel on dropdown
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = kitchenware_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])

    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic"})
    ])

# Navigation arrows
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run the app
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=8987)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# Your GitHub username and repo path
GITHUB_USERNAME = "SaraBarbu"
GITHUB_REPO = "Images10k-compendium"
GITHUB_BASE_URL = f"https://raw.githubusercontent.com/{GITHUB_USERNAME}/{GITHUB_REPO}/main/assets_github/object/jewelry"

# Path to the local jewelry image directory
JEWELRY_DIR = os.path.abspath("../assets_github/object/jewelry")

# Build dropdown list from folders
JEWELRY_ITEMS = sorted([
    item for item in os.listdir(JEWELRY_DIR)
    if os.path.isdir(os.path.join(JEWELRY_DIR, item))
])

# Build image URLs directly from GitHub
jewelry_images = {
    item: sorted([
        f"{GITHUB_BASE_URL}/{item}/{img}"
        for img in os.listdir(os.path.join(JEWELRY_DIR, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png"))
    ])
    for item in JEWELRY_ITEMS
}

# Dash app config 
app = JupyterDash(
    __name__,
    assets_folder=os.path.abspath("../assets"),
    assets_url_path="/assets"
)
app.title = "💍 Jewelry Carousel"

# Layout
app.layout = html.Div([
    html.H2("💍 Jewelry Carousel", style={
        "textAlign": "center", "marginBottom": "30px",
        "fontSize": "22px", "fontWeight": "bold", "fontFamily": "Georgia, serif"
    }),

    html.Div([
        html.Label("Select jewelry item:", style={
            "fontWeight": "bold", "display": "block", "marginBottom": "8px"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in JEWELRY_ITEMS],
            value=JEWELRY_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Update carousel on dropdown
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = jewelry_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])

    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic"})
    ])

# Navigation arrows
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run app
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=8234)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os

# GitHub raw content base URL
RAW_GITHUB_BASE = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/musical_instrument"

# Local path to musical instrument directory
LOCAL_MUSIC_DIR = os.path.abspath("../assets_github/object/musical_instrument")
MUSICAL_ITEMS = sorted([
    item for item in os.listdir(LOCAL_MUSIC_DIR)
    if os.path.isdir(os.path.join(LOCAL_MUSIC_DIR, item))
])

# Dictionary {item: list of raw GitHub URLs}
musical_images = {
    item: sorted([
        f"{RAW_GITHUB_BASE}/{item}/{img}"
        for img in os.listdir(os.path.join(LOCAL_MUSIC_DIR, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png"))
    ])
    for item in MUSICAL_ITEMS
}

# Layout
app = JupyterDash(__name__)
app.title = "🎶 Musical Instrument Carousel"

app.layout = html.Div([
    html.H2("🎶 Musical Instrument Carousel", style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div([
        html.Label("Select musical instrument:", style={
            "fontWeight": "normal", "display": "block", "marginBottom": "8px"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in MUSICAL_ITEMS],
            value=MUSICAL_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Affichage du carousel
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = musical_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])

    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic"})
    ])

# Navigation flèches
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run app
app.run(port=8221)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os

# Public GitHub path to medical instrument images
RAW_GITHUB = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/medical_instrument"

# Local path just to list directories
LOCAL_MEDICAL_PATH = os.path.abspath("../assets_github/object/medical_instrument")
MEDICAL_ITEMS = sorted([
    item for item in os.listdir(LOCAL_MEDICAL_PATH)
    if os.path.isdir(os.path.join(LOCAL_MEDICAL_PATH, item))
])

# 📸 Dictionary {item: list of GitHub image URLs}
medical_images = {
    item: sorted([
        f"{RAW_GITHUB}/{item}/{img}"
        for img in os.listdir(os.path.join(LOCAL_MEDICAL_PATH, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png"))
    ])
    for item in MEDICAL_ITEMS
}

# Layout
app = JupyterDash(__name__)
app.title = "🩺 Medical Instrument Carousel"

app.layout = html.Div([
    html.H2("🩺 Medical Instrument Carousel", style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div([
        html.Label("Select medical instrument:", style={
            "fontWeight": "normal", "display": "block", "marginBottom": "8px"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in MEDICAL_ITEMS],
            value=MEDICAL_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Update carousel on selection
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = medical_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])

    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic"})
    ])

# Navigation with arrows
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Launch app
if __name__ == "__main__":
    app.run(port=8159)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os

# GitHub raw path for public image access
RAW_GITHUB = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/tool"

# Local path to the GitHub-tracked tool images 
LOCAL_TOOL_PATH = os.path.abspath("../assets_github/object/tool")
TOOL_ITEMS = sorted([
    item for item in os.listdir(LOCAL_TOOL_PATH)
    if os.path.isdir(os.path.join(LOCAL_TOOL_PATH, item))
])

# Dictionary {item: list of GitHub image URLs}
tool_images = {}
for item in TOOL_ITEMS:
    item_dir = os.path.join(LOCAL_TOOL_PATH, item)
    tool_images[item] = sorted([
        f"{RAW_GITHUB}/{item}/{img}"
        for img in os.listdir(item_dir)
        if img.lower().endswith((".jpg", ".jpeg", ".png"))
    ])

# Layout
app = JupyterDash(__name__)
app.title = "🔧 Tool Carousel"

app.layout = html.Div([
    html.H2("🔧 Tool Carousel", style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div([
        html.Label("Select tool item:", style={
            "fontWeight": "normal", "display": "block", "marginBottom": "8px"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{
                "label": item.replace("_", " ").capitalize(),
                "value": item
            } for item in TOOL_ITEMS],
            value=TOOL_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Carousel display
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = tool_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])

    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"})
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic"})
    ])

# Arrow navigation
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run app
app.run(port=8124)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os

# Public GitHub base path
GITHUB_BASE_URL = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/school"

# Local directory to read item names
LOCAL_SCHOOL_DIR = os.path.abspath("../assets_github/object/school")
SCHOOL_ITEMS = sorted([
    item for item in os.listdir(LOCAL_SCHOOL_DIR)
    if os.path.isdir(os.path.join(LOCAL_SCHOOL_DIR, item))
])

# Image URLs (hosted on GitHub)
school_images = {}
for item in SCHOOL_ITEMS:
    local_item_dir = os.path.join(LOCAL_SCHOOL_DIR, item)
    school_images[item] = sorted([
        f"{GITHUB_BASE_URL}/{item}/{img}"
        for img in os.listdir(local_item_dir)
        if img.lower().endswith((".jpg", ".jpeg", ".png"))
    ])

# Dash Layout
app = JupyterDash(__name__)
app.title = "📚 School Carousel"

app.layout = html.Div([
    html.H2("📚 School Carousel", style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div([
        html.Label("Select school item:", style={
            "fontWeight": "normal", "display": "block", "marginBottom": "8px"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in SCHOOL_ITEMS],
            value=SCHOOL_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Load images for dropdown selection
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = school_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])

    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"})
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic"})
    ])

# Navigate images
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run
app.run(port=8299)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os

# Public GitHub image path
GITHUB_BASE_URL = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/outdoor_sport"

# Load outdoor sport categories from local directory to generate the list
LOCAL_SPORT_DIR = os.path.abspath("../assets_github/object/outdoor_sport")
SPORT_ITEMS = sorted([
    item for item in os.listdir(LOCAL_SPORT_DIR)
    if os.path.isdir(os.path.join(LOCAL_SPORT_DIR, item))
])

# Dictionary {item: list of full GitHub image URLs}
sport_images = {
    item: sorted([
        f"{GITHUB_BASE_URL}/{item}/{img}"
        for img in os.listdir(os.path.join(LOCAL_SPORT_DIR, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png"))
    ])
    for item in SPORT_ITEMS
}

# Layout
app = JupyterDash(__name__)
app.title = "🏃 Outdoor Sport Carousel"

app.layout = html.Div([
    html.H2("🏃 Outdoor Sport Carousel", style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div([
        html.Label("Select outdoor sport item:", style={
            "fontWeight": "normal", "display": "block", "marginBottom": "8px"
        }),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in SPORT_ITEMS],
            value=SPORT_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

# Display carousel based on dropdown
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = sport_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])

    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "20px"}),
            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),
            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "20px"}),
        ], style={"textAlign": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px", "fontStyle": "italic"})
    ])

# Navigation arrows
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run app
app.run(port=8876)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os
from IPython.display import clear_output

# GitHub base URL for public image access
GITHUB_RAW_BASE = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/vehicle"

# Local folder where images are stored (only for listing names)
LOCAL_VEHICLE_PATH = os.path.abspath("../assets_github/object/vehicle")
VEHICLE_ITEMS = sorted([
    item for item in os.listdir(LOCAL_VEHICLE_PATH)
    if os.path.isdir(os.path.join(LOCAL_VEHICLE_PATH, item))
])

# Construct dict of public image URLs
vehicle_images = {}
for item in VEHICLE_ITEMS:
    folder_path = os.path.join(LOCAL_VEHICLE_PATH, item)
    vehicle_images[item] = sorted([
        f"{GITHUB_RAW_BASE}/{item}/{img}"
        for img in os.listdir(folder_path)
        if img.lower().endswith((".jpg", ".jpeg", ".png"))
    ])

# Launch Dash app
app = JupyterDash(__name__)
app.title = "🚗 Vehicle Carousel"

app.layout = html.Div([
    html.H2("🚗 Vehicle Carousel", style={
        "textAlign": "center", "marginBottom": "25px", "marginTop": "10px",
        "fontSize": "24px", "fontWeight": "bold", "fontFamily": "Georgia, serif"
    }),

    html.Div([
        html.Label("Select vehicle item:", style={"fontSize": "16px", "marginBottom": "6px", "fontFamily": "Georgia, serif"}),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in VEHICLE_ITEMS],
            value=VEHICLE_ITEMS[0] if VEHICLE_ITEMS else None,
            clearable=False,
            style={"width": "300px", "margin": "0 auto", "fontFamily": "Georgia, serif"}
        )
    ], style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
], style={"fontFamily": "Georgia, serif", "padding": "30px"})

# Display images in carousel
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value'),
    prevent_initial_call=False
)
def update_carousel(item):
    images = vehicle_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center", "fontSize": "18px", "color": "#e74c3c"})

    filename = os.path.basename(images[0])
    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0, style={
                "fontSize": "18px", "padding": "5px 10px", "marginRight": "15px",
                "backgroundColor": "#f8f9fa", "border": "1px solid #ccc",
                "borderRadius": "8px", "cursor": "pointer"
            }),
            html.Img(id="carousel-image", src=images[0], style={
                "maxHeight": "410px", "maxWidth": "380px",
                "borderRadius": "12px", "boxShadow": "0 0 6px rgba(0,0,0,0.1)"
            }),
            html.Button("➡️", id="next-button", n_clicks=0, style={
                "fontSize": "18px", "padding": "5px 10px", "marginLeft": "15px",
                "backgroundColor": "#f8f9fa", "border": "1px solid #ccc",
                "borderRadius": "8px", "cursor": "pointer"
            }),
        ], style={"display": "flex", "justifyContent": "center", "alignItems": "center"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),
        html.Div(f"1/{len(images)} - {filename}", id='filename-display', style={
            "fontSize": "14px", "marginTop": "10px", "color": "#444", "fontFamily": "Georgia, serif"
        })
    ])

# Navigation arrows
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    triggered = ctx.triggered_id
    if triggered == "next-button":
        index = (index + 1) % len(images)
    elif triggered == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Run
if __name__ == "__main__":
    clear_output(wait=True)
    app.run(port=8997)

from dash import dcc, html, Input, Output, State, ctx
from jupyter_dash import JupyterDash
import os

# GitHub image base URL
GITHUB_BASE_URL = "https://raw.githubusercontent.com/SaraBarbu/Images10k-compendium/main/assets_github/object/bathroom"

# Local list of subcategories
BATHROOM_DIR = os.path.abspath("../assets_github/object/bathroom")
BATHROOM_ITEMS = sorted([
    item for item in os.listdir(BATHROOM_DIR)
    if os.path.isdir(os.path.join(BATHROOM_DIR, item))
])

# Image dictionary {category: [full GitHub URLs]}
bathroom_images = {
    item: sorted([
        f"{GITHUB_BASE_URL}/{item}/{img}"
        for img in os.listdir(os.path.join(BATHROOM_DIR, item))
        if img.lower().endswith((".jpg", ".jpeg", ".png"))
    ])
    for item in BATHROOM_ITEMS
}

# Dash app
app = JupyterDash(__name__)
app.title = "🚿 Bathroom Carousel"

app.layout = html.Div([
    html.H2("🚿 Bathroom Carousel", style={"textAlign": "center", "marginBottom": "30px"}),

    html.Div([
        html.Label("Select bathroom item:"),
        dcc.Dropdown(
            id='item-dropdown',
            options=[{"label": item.replace("_", " ").capitalize(), "value": item} for item in BATHROOM_ITEMS],
            value=BATHROOM_ITEMS[0],
            clearable=False,
            style={"width": "300px", "margin": "0 auto"}
        )
    ], style={"textAlign": "center", "marginBottom": "20px"}),

    html.Div(id='carousel-container', style={"textAlign": "center"})
])

#  Generate carousel
@app.callback(
    Output('carousel-container', 'children'),
    Input('item-dropdown', 'value')
)
def update_carousel(item):
    images = bathroom_images.get(item, [])
    if not images:
        return html.P("No images available.", style={"textAlign": "center"})

    filename = os.path.basename(images[0])

    return html.Div([
        html.Div([
            html.Button("⬅️", id="prev-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginRight": "15px"}),

            html.Img(id="carousel-image", src=images[0],
                     style={"height": "410px", "display": "inline-block", "verticalAlign": "middle"}),

            html.Button("➡️", id="next-button", n_clicks=0,
                        style={"fontSize": "16px", "padding": "5px 10px", "marginLeft": "15px"}),
        ], style={"display": "flex", "justifyContent": "center", "alignItems": "center", "marginBottom": "20px"}),

        dcc.Store(id='image-index', data=0),
        dcc.Store(id='current-images', data=images),

        html.Div(f"1/{len(images)} - {filename}", id='filename-display',
                 style={"textAlign": "center", "fontSize": "14px"})
    ])

# Navigate images
@app.callback(
    Output("carousel-image", "src"),
    Output("image-index", "data"),
    Output("filename-display", "children"),
    Input("prev-button", "n_clicks"),
    Input("next-button", "n_clicks"),
    State("current-images", "data"),
    State("image-index", "data"),
    prevent_initial_call=True
)
def navigate_images(prev_clicks, next_clicks, images, index):
    if not images:
        return "", 0, "No images"

    if ctx.triggered_id == "next-button":
        index = (index + 1) % len(images)
    elif ctx.triggered_id == "prev-button":
        index = (index - 1) % len(images)

    filename = os.path.basename(images[index])
    return images[index], index, f"{index + 1}/{len(images)} - {filename}"

# Launch
if __name__ == "__main__":
    app.run(port=8620)