Updated layout. Hi I added a nice new layout that you might like

[GusLovesMath]

Amazing work on this project! I really love the interface. Below is the style I used

class GusStyle(Base):
    def __init__(
        self,
        *,
        primary_hue: colors.Color | str = colors.sky,
        secondary_hue: colors.Color | str = colors.blue,
        neutral_hue: colors.Color | str = colors.gray,
        spacing_size: sizes.Size | str = sizes.spacing_md,
        radius_size: sizes.Size | str = sizes.radius_md,
        text_size: sizes.Size | str = sizes.text_lg,
        font: fonts.Font
        | str
        | Iterable[fonts.Font | str] = (
            fonts.GoogleFont("Quicksand"),
            "ui-sans-serif",
            "sans-serif",
        ),
        font_mono: fonts.Font
        | str
        | Iterable[fonts.Font | str] = (
            fonts.GoogleFont("IBM Plex Mono"),
            "ui-monospace",
            "monospace",
        ),
    ):
        super().__init__(
            primary_hue=primary_hue,
            secondary_hue=secondary_hue,
            neutral_hue=neutral_hue,
            spacing_size=spacing_size,
            radius_size=radius_size,
            text_size=text_size,
            font=font,
            font_mono=font_mono,
        )

Here is the shifted arrangement. I feel like this gives the user more room to see chat history.

with gr.Blocks(fill_height=True, theme=GusStyle()) as demo:
    with gr.Row():
        with gr.Column(scale=2):
            temp_slider = gr.State(0.2)
            max_gen_token = gr.State(512)
            freq_penalty = gr.State(1.05)
            retrieve_docs = gr.State(3)
            language = gr.State("default")
            gr.ChatInterface(
                chatbot=gr.Chatbot(height=800, render=False),
                fn=chatbot,  # Function to call on user input
                title="🍎 MLX Chat",  # Title of the web page
                retry_btn='Retry',
                undo_btn='Undo',
                clear_btn='Clear',
                additional_inputs=[temp_slider, max_gen_token, freq_penalty, retrieve_docs],
            )
        with gr.Column(scale=1):
            ## SELECT MODEL
            model_name = gr.Dropdown(
                label="Select Model",
                info="Select your model",
                choices=sorted(model_list),
                interactive=True,
                render=False,
            )
            model_name.render()
            language = gr.Dropdown(
                label="Language",
                choices=sorted(SUPPORTED_LANG),
                info="Chose Supported Language",
                value="default",
                interactive=True,
            )
            btn1 = gr.Button("Load Model", variant="primary")
            btn3 = gr.Button("Unload Model", variant="stop")

            # FILE
            mode = gr.Dropdown(
                label="Dataset",
                info="Choose your dataset type",
                choices=["Files (docx, pdf, txt)", "YouTube (url)"],
                scale=5,
            )
            url = gr.Textbox(
                label="URL",
                info="Enter your filepath (URL for Youtube)",
                interactive=True,
            )
            upload_button = gr.UploadButton(
                label="Upload File", variant="primary"
            )
            # MODEL STATUS
            # data = gr.Textbox(visible=lambda mode: mode == 'YouTube')
            model_status = gr.Textbox("Model Not Loaded", label="Model Status")
            index_status = gr.Textbox("Not Index", label="Index Status")
            btn1.click(
                load_model,
                inputs=[model_name, language],
                outputs=[model_status],
            )
            btn3.click(kill_process, outputs=[model_status])
            upload_button.upload(
                upload, inputs=upload_button, outputs=[url, index_status]
            )

            index_button = gr.Button("Start Indexing", variant="primary")
            index_button.click(
                indexing, inputs=[mode, url], outputs=[index_status]
            )
            stop_index_button = gr.Button("Stop Indexing")
            stop_index_button.click(kill_index, outputs=[index_status])

    with gr.Accordion("Advanced Setting", open=False):
        with gr.Row():
            with gr.Column(scale=1):
                temp_slider = gr.Slider(
                    label="Temperature",
                    value=0.2,
                    minimum=0.0,
                    maximum=1.0,
                    step=0.05,
                    interactive=True,
                )
                max_gen_token = gr.Slider(
                    label="Max Tokens",
                    value=512,
                    minimum=512,
                    maximum=4096,
                    step=256,
                    interactive=True,
                )
            with gr.Column(scale=1):
                freq_penalty = gr.Slider(
                    label="Frequency Penalty",
                    value=1.05,
                    minimum=-2,
                    maximum=2,
                    step=0.05,
                    interactive=True,
                )
                retrieve_docs = gr.Slider(
                    label="No. Retrieval Docs",
                    value=3,
                    minimum=1,
                    maximum=10,
                    step=1,
                    interactive=True,
                )

[GusLovesMath]

I also added a yaml file for Llama3

original_repo: meta-llama/Meta-Llama-3-8B-Instruct
mlx-repo: mlx-community/Meta-Llama-3-8B-Instruct-4bit
quantize: 4bit
default_language: en

[qnguyen3]

thank you, this looks fantastic :D

[qnguyen3]

I ended up adopt the UI with some changes, thank you very much!

[GusLovesMath]

I am glad I could help! This project is great thank you for working on it! :D