app.py

import gradio as gr
import random
import json
import re
import os

# Default configuration template
default_config = {
    'background': '/AutoGameBackgrounds/1stGameLoc123.png',
    'inventory': [],
    'skills': [],
    'objectives': [],
    'targets': [],
    'story': [],
    'actions': {}
}

# Helper functions to dynamically add items
def add_inventory_item(inventory_items, type, name, description):
    new_item = {"type": type, "name": name, "description": description}
    inventory_items.append(new_item)
    return inventory_items

def add_skill(skills_items, branch, name, learned):
    new_skill = {"branch": branch, "name": name, "learned": learned == 'True'}
    skills_items.append(new_skill)
    return skills_items

def add_objective(objectives_items, id, name, complete):
    new_objective = {"id": id, "name": name, "complete": complete == 'True'}
    objectives_items.append(new_objective)
    return objectives_items

def add_target(targets_items, name, x, y, collisionType, collisiontext):
    new_target = {"name": name, "x": int(x), "y": int(y), "collisionType": collisionType, "collisiontext": collisiontext}
    targets_items.append(new_target)
    return targets_items

#-----------------------------------------------------------------------------------------------------------------------------------


# List of player engagement UI elements
player_engagement_items = [
    "Health Bar", "Mana/Energy Bar", "Experience Bar", "Mini-Map", "Quest Tracker",
    "Inventory Quick Access Slots", "Skill Cooldown Indicators", "Currency Display",
    "Compass", "Timer/Clock", "Action Prompts", "Reticle/Crosshair", "Enemy Health Bars",
    "Score Display", "Inventory Grid", "Item Tooltip", "Item Categories/Tabs",
    "Equip/Unequip Buttons", "Item Sorting Options", "Character Stats Panel",
    "Character Model Viewer", "Quick Equip Slots", "Dialogue Box", "Dialogue Choices",
    "Character Portraits", "Character Name Display", "Subtitle Text", "World Map",
    "Local Map", "Fast Travel Points", "Map Markers", "Map Legend", "Crafting Recipe List",
    "Ingredient Slots", "Craft Button", "Crafting Progress Bar", "Skill Nodes",
    "Skill Descriptions", "Skill Point Counter", "Unlock Button", "Skill Path Highlight",
    "Quest List", "Quest Details Panel", "Quest Objectives", "Quest Rewards",
    "Quest Status Indicators", "Chat Box", "Player List", "Voice Chat Indicators",
    "Ping/Latency Indicator", "Party/Team UI", "Scoreboard", "Matchmaking Screen",
    "Pop-up Notifications", "Achievement Unlocks", "System Messages",
    "On-screen Key Prompts", "Environmental Interaction Icons", "Save/Auto-Save Indicators",
    "Credits Screen"
]

# List of character-based story events
story_events = [
    'exploreLocation', 'discoverClue', 'meetCharacter', 'solveRiddle', 'findItem',
    'faceChallenge', 'makeDecision', 'engageBattle', 'unlockAbility', 'learnSecret',
    'completeMission', 'experienceSetback', 'earnReward', 'uncoverMystery', 'formAlliance',
    'faceBetrayal', 'confrontNemesis', 'makeDiscovery', 'overcomeLoss', 'achieveVictory'
]

def pick_random_items(items, n):
    return random.sample(items, n)

def generate_timeline(events, label):
    timeline = []
    for event in events:
        timeline.append((random.randint(1, 100), label, event))
    return timeline

def create_story(timeline):
    story = []
    for entry in timeline:
        if entry[1] == "Story":
            story.append(f"The hero {entry[2].replace('engageBattle', 'engaged in a fierce battle').replace('solveRiddle', 'solved a complex riddle').replace('exploreLocation', 'explored a mysterious location')}.")
        else:
            story.append(f"The player interacted with {entry[2]}.")
    return " ".join(story)

def generate_story_and_timeline(no_ui_timeline_points=10, no_media_timeline_points=5, include_media=True):
    # Pick 10 random UI items
    random_ui_items = pick_random_items(player_engagement_items, no_ui_timeline_points)

    # Generate UI and story timelines
    ui_timeline = generate_timeline(random_ui_items, "UI")
    story_timeline = generate_timeline(story_events, "Story")

    # Initialize merged timeline with UI and story timelines
    merged_timeline = ui_timeline + story_timeline
    no_media_merged_timeline = ui_timeline + story_timeline
    #print(merged_timeline)
    #print(no_media_merged_timeline)

    # Include media-related items if specified
    if include_media:
        media_files = generate_media_file_list(no_media_timeline_points)
        #rendered_media = render_media_with_dropdowns(media_files)
        media_timeline = generate_timeline(media_files, "Media")
        merged_timeline += media_timeline

    print(merged_timeline)

    # Sort the merged timeline based on the random numbers
    merged_timeline.sort(key=lambda x: x[0])
    no_media_merged_timeline.sort(key=lambda x: x[0])

    # Create the story
    story = create_story(merged_timeline)

    # Format the timeline for display
    formatted_timeline = "\n".join([f"{entry[0]}: {entry[1]} - {entry[2]}" for entry in merged_timeline])
    no_media_formatted_timeline = "\n".join([f"{entry[0]}: {entry[1]} - {entry[2]}" for entry in no_media_merged_timeline])

    game_structure_with_media, game_structure_without_media = generate_game_structures(formatted_timeline, no_media_formatted_timeline)

    return formatted_timeline, no_media_formatted_timeline, story, json.dumps(game_structure_with_media, indent=2), json.dumps(game_structure_without_media, indent=2) #, game_structure_with_media

media_file_types = ["image", "video", "audio"]

def generate_media_file_list(n):
    return [random.choice(media_file_types) for _ in range(n)]


def show_elements(text):
    # Parse the input text
    pattern = r'(\d+): (UI|Story|Media) - (.+)'
    blocks = re.findall(pattern, text)
    
    # Sort blocks by their timestamp
    blocks.sort(key=lambda x: int(x[0]))
    
    outputs = []
    
    for timestamp, block_type, content in blocks:
        if block_type == 'UI':
            # Create HTML for UI elements
            ui_html = f'<div class="ui-element">{content}</div>'
            outputs.append(gr.HTML(ui_html))
        elif block_type == 'Story':
            # Display story elements as Markdown
            outputs.append(gr.Markdown(f"**{content}**"))
        elif block_type == 'Media':
            if content.lower() == 'audio':
                # Placeholder for audio element
                outputs.append(gr.Audio(label=f"Audio at {timestamp} in the order"))
            elif content.lower() == 'video':
                # Placeholder for video element
                outputs.append(gr.Video(label=f"Video at {timestamp} in the order"))
            elif content.lower() == 'image':
                # Placeholder for image element
                outputs.append(gr.Image(label=f"Image at {timestamp} in the order"))
    
    return outputs

# def show_elements_json_input(json_input):
#     data = json.loads(json_input)
#     masterlocation1 = data['masterlocation1']
    
#     outputs = []
    
#     for location, details in masterlocation1.items():
#         if location == 'end':
#             continue
        
#         with gr.Accordion(f"Location: {location} - Previous desciption {details['description']}", open=False):
#             description = gr.Textbox(label="Description", value=details['description'], interactive=True)
#             outputs.append(description)
            
#             events = gr.Textbox(label="Events", value=json.dumps(details['events']), interactive=True)
#             outputs.append(events)
            
#             choices = gr.Textbox(label="Choices", value=json.dumps(details['choices']), interactive=True)
#             outputs.append(choices)
            
#             transitions = gr.Textbox(label="Transitions", value=json.dumps(details['transitions']), interactive=True)
#             outputs.append(transitions)
    
#     def update_json(*current_values):
#         updated_data = {"masterlocation1": {}}
#         locations = [loc for loc in masterlocation1.keys() if loc != 'end']
#         for i, location in enumerate(locations):
#             updated_data["masterlocation1"][location] = {
#                 "description": current_values[i*4],
#                 "events": json.loads(current_values[i*4 + 1]),
#                 "choices": json.loads(current_values[i*4 + 2]),
#                 "transitions": json.loads(current_values[i*4 + 3])
#             }
#         updated_data["masterlocation1"]["end"] = masterlocation1["end"]
#         return json.dumps(updated_data, indent=2)
    
#     update_button = gr.Button("Update JSON")
#     json_output = gr.Textbox(label="Updated JSON", lines=10)
    
#     update_button.click(update_json, inputs=outputs, outputs=json_output)
    
#     return outputs + [update_button, json_output]

def show_elements_json_input(json_input):
    data = json.loads(json_input)
    masterlocation1 = data['masterlocation1']
    
    outputs = []
    
    for location, details in masterlocation1.items():
        if location == 'end':
            continue
        
        with gr.Accordion(f"Location: {location} - Previous description {details['description']}", open=False):
            description = gr.Textbox(label="Description", value=details['description'], interactive=True)
            outputs.append(description)
            
            events = gr.Textbox(label="Events", value=json.dumps(details['events']), interactive=True)
            outputs.append(events)
            
            choices = gr.Textbox(label="Choices", value=json.dumps(details['choices']), interactive=True)
            outputs.append(choices)
            
            transitions = gr.Textbox(label="Transitions", value=json.dumps(details['transitions']), interactive=True)
            outputs.append(transitions)
            
            # New media field
            media = gr.Textbox(label="Media", value=json.dumps(details.get('media', [])), interactive=True)
            outputs.append(media)
    
    def update_json(*current_values):
        updated_data = {"masterlocation1": {}}
        locations = [loc for loc in masterlocation1.keys() if loc != 'end']
        for i, location in enumerate(locations):
            updated_data["masterlocation1"][location] = {
                "description": current_values[i*5],
                "events": json.loads(current_values[i*5 + 1]),
                "choices": json.loads(current_values[i*5 + 2]),
                "transitions": json.loads(current_values[i*5 + 3]),
                "media": json.loads(current_values[i*5 + 4])  # New media field
            }
        updated_data["masterlocation1"]["end"] = masterlocation1["end"]
        return json.dumps(updated_data, indent=2)
    
    update_button = gr.Button("Update JSON")
    json_output = gr.Textbox(label="Updated JSON", lines=10)
    
    update_button.click(update_json, inputs=outputs, outputs=json_output)
    
    return outputs + [update_button, json_output]

def create_media_component(file_path):
    print(file_path)
    _, extension = os.path.splitext(file_path)
    extension = extension.lower()[1:]  # Remove the dot and convert to lowercase

    if extension in ['jpg', 'jpeg', 'png', 'gif', 'webp']:
        return gr.Image(value=file_path, label="Image Input")
    elif extension in ['mp4', 'avi', 'mov']:
        return gr.Video(value=file_path, label="Video Input")
    elif extension in ['mp3', 'wav', 'ogg']:
        return gr.Audio(value=file_path, label="Audio Input")
    else:
        return gr.Textbox(value=file_path, label=f"File: {os.path.basename(file_path)}")

def convert_timeline_to_game_structure(timeline):
    lines = timeline.split('\n')
    game_structure = {}
    current_location = 0
    sub_location = 0

    for i, line in enumerate(lines):
        if line.strip() == "":
            continue
        
        if line[0].isdigit():  # New location starts
            current_location += 1
            sub_location = 0
            location_key = f"location{current_location}"
            game_structure[location_key] = {
                "description": "",
                "events": [],
                "choices": ["continue"],
                "transitions": {}
            }
        else:  # Continue with sub-locations or media entries
            sub_location += 1
            location_key = f"location{current_location}_{sub_location}"
        
        # Extract the event description
        parts = line.split(': ', 1)
        if len(parts) == 2:
            prefix, rest = parts
            event_parts = rest.split(' - ', 1)
            if len(event_parts) == 2:
                event_type, event_description = event_parts
            else:
                event_type, event_description = "Unknown", rest
        else:
            event_type, event_description = "Unknown", line
        
        description = rest.strip() if event_type in ["Media", "UI"] else f"{event_type}: {event_description}"
        
        if sub_location == 0:
            game_structure[f"location{current_location}"]["description"] = description
        else:
            game_structure[f"location{current_location}"]["events"].append({
                "description": description,
                "type": event_type
            })
        
        # Set the transition to the next location or to the end
        if i < len(lines) - 1:
            next_line = lines[i + 1].strip()
            if next_line and next_line[0].isdigit():  # New location starts
                game_structure[f"location{current_location}"]["transitions"]["continue"] = f"masterlocation1_location{current_location + 1}"
            else:
                #game_structure[f"location{current_location}"]["transitions"]["continue"] = f"location_{current_location}_{sub_location + 1}"
                game_structure[f"location{current_location}"]["transitions"]["continue"] = "end"
        else:
            game_structure[f"location{current_location}"]["transitions"]["continue"] = "end"
    
    # Add an end location
    game_structure["end"] = {
        "description": "The adventure ends here.",
#         "choices": [],
#         "transitions": {}
        "choices": ["restart"],
        "transitions": {"restart": "location1"}  # Assuming location_1 is the start

    }
    
    # Wrap the game structure in master_location1
    wrapped_structure = {"masterlocation1": game_structure}
    
    return wrapped_structure
    
def generate_game_structures(timeline_with_media, timeline_without_media):
    
    game_structure_with_media = convert_timeline_to_game_structure(timeline_with_media)
    game_structure_without_media = convert_timeline_to_game_structure(timeline_without_media)
    
    return game_structure_with_media, game_structure_without_media


#-----------------------------------------------------------------------------------------------------------------------------------

class Player:
    def __init__(self):
        self.inventory = []
        self.money = 20
        self.knowledge = {}

    def add_item(self, item):
        self.inventory.append(item)

    def has_item(self, item):
        return item in self.inventory

    def update_knowledge(self, topic):
        self.knowledge[topic] = True

# Define the states
all_states = {
    'village': {
        'start': {
            "description": "You wake up in a small village. You hear a rumor about a lost treasure.",
            "choices": ['explore village', 'gather supplies', 'rest'],
            "transitions": {'explore village': 'village_rumor', 'gather supplies': 'village_supplies', 'rest': 'village_start'},
            "consequences": {
                'gather supplies': lambda player: player.add_item('basic supplies')
            }
        },
        'rumor': {
            "description": "You hear more details about the treasure hidden in the ancient ruins nearby.",
            "choices": ['decide to go', 'ignore'],
            "transitions": {'decide to go': 'village_supplies', 'ignore': 'village_start'},
            "consequences": {
                'decide to go': lambda player: player.update_knowledge('treasure location')
            }
        },
        'supplies': {
            "description": "You gather supplies for your journey.",
            "choices": ['head to forest', 'stay in village'],
            "transitions": {'head to forest': 'forest_forest', 'stay in village': 'village_start'}
        },
    },
    'forest': {
        'forest': {
            "description": "You enter the dense forest, heading towards the ruins.",
            "choices": ['travel further', 'return to village'],
            "transitions": {'travel further': 'ruins_ruins', 'return to village': 'village_start'}
        },
    },
    'ruins': {
        'ruins': {
            "description": "You reach the ancient ruins. The entrance is dark and eerie.",
            "choices": ['enter ruins', 'return to forest'],
            "transitions": {'enter ruins': 'ruins_explore', 'return to forest': 'forest_forest'}
        },
        'explore': {
            "description": "You explore the ruins, encountering traps and puzzles.",
            "choices": ['solve puzzle', 'avoid traps'],
            "transitions": {'solve puzzle': 'ruins_hiddenPassage', 'avoid traps': 'ruins_ruins'}
        },
        'hiddenPassage': {
            "description": "You solve a challenging puzzle and unlock a hidden passage.",
            "choices": ['enter passage', 'go back'],
            "transitions": {'enter passage': 'ruins_treasureRoom', 'go back': 'ruins_explore'}
        },
        'treasureRoom': {
            "description": "You enter the treasure room and find the treasure chest.",
            "choices": ['take treasure', 'leave'],
            "transitions": {'take treasure': 'ruins_celebrate', 'leave': 'ruins_ruins'},
            "consequences": {
                'take treasure': lambda player: player.add_item('treasure')
            }
        },
        'celebrate': {
            "description": "You celebrate your discovery and decide to bring the treasure back to the village.",
            "choices": ['return to village'],
            "transitions": {'return to village': 'village_return'}
        },
    },
    'village_return': {
        'village_return': {
            "description": "You return to the village with the treasure and share it with the villagers.",
            "choices": ['end adventure'],
            "transitions": {'end adventure': 'end_end'}
        },
    },
    'end': {
        'end': {
            "description": "Your adventure ends here. The villagers are grateful and everyone's lives improve.",
            "choices": [],
            "transitions": {}
        },
    }
}

def validate_transitions(all_states):
    errors = []
    for location, states in all_states.items():
        for state_key, state in states.items():
            for transition_key, transition_state in state['transitions'].items():
                # Check if the transition is to another location
                if transition_state in all_states:
                    trans_location, trans_state = transition_state, 'start'  # Assuming 'start' state for new locations
                elif '_' in transition_state:
                    trans_location, trans_state = transition_state.split('_')
                else:
                    trans_location, trans_state = location, transition_state

                # Validate the transition state
                if trans_location not in all_states or trans_state not in all_states[trans_location]:
                    errors.append(f"Invalid transition from {location}.{state_key} to {trans_location}.{trans_state}")

    return errors

path_errors = validate_transitions(all_states)
if path_errors:
    for error in path_errors:
        print(error)
else:
    print("All transitions are valid.")

class GameSession:
    def __init__(self, starting_location='village', starting_state='start'):
        self.player = Player()
        self.current_location = starting_location
        self.current_state = starting_state
        self.game_log = []

    def make_choice(self, choice_index):
        state = all_states[self.current_location][self.current_state]
        if 0 <= choice_index < len(state['choices']):
            choice = state['choices'][choice_index]
            next_state = state['transitions'][choice]

            self.game_log.append(f"You chose: {choice}")
            self.game_log.append(state['description'])

            if 'consequences' in state and choice in state['consequences']:
              if state['consequences'][choice]:
                  state['consequences'][choice](self.player)
              else:
                  # Handle empty consequence, e.g., log a message or provide a default action
                  print(f"No consequence for choice: {choice}")
                  # You can add any default action here if needed

            if '_' in next_state:
                self.current_location, self.current_state = next_state.split('_')
            else:
                self.current_state = next_state

            return self.get_current_state_info()
        else:
            return "Invalid choice. Please try again."

    def get_current_state_info(self):
        state = all_states[self.current_location][self.current_state]
        choices = [f"{idx + 1}. {choice}" for idx, choice in enumerate(state['choices'])]
        return state['description'], choices, "\n".join(self.game_log)

def start_game(starting_location='village', starting_state='start'):
    game_session = GameSession(starting_location, starting_state)
    description, choices, game_log = game_session.get_current_state_info()
    return description, choices, game_log, game_session

def make_choice(choice, game_session): #Calls the nested make choice function in the game session class
    if not choice:
        description, choices, game_log = game_session.get_current_state_info()
        return description, choices, "Please select a choice before proceeding.", game_session

    choice_index = int(choice.split('.')[0]) - 1 
    result = game_session.make_choice(choice_index)

    return result[0], gr.update(choices=result[1]), result[2], game_session

# def load_game(custom_config=None, with_media=False):
#     global all_states
#     if custom_config:
#         try:
#             new_config = json.loads(custom_config)

#             all_states = new_config

#             # Determine the starting location and state
#             starting_location = next(iter(all_states.keys()))
#             starting_state = next(iter(all_states[starting_location].keys()))
#             print(starting_location, starting_state)

#             game_session = GameSession(starting_location, starting_state)
#             description, choices, game_log = game_session.get_current_state_info()
#             new_path_errors = validate_transitions(all_states)
#             media = None
#             output_media = None

#             print(all_states[starting_location][starting_state][media])
#             print(with_media)
#             print("everything fine till here")
#             if with_media:
#                 print("everything fine till here 5")
#                 if all_states[starting_location][starting_state][media] != []:
#                     print(f"everything fine till here 4 - {all_states[starting_location][starting_state][media]}")
#                     media = all_states[starting_location][starting_state][media]
#                     print("everything fine till here 2")
#                     for media_path in media:
#                         media_component = create_media_component(media_path)
#                         output_media.append(media_component)
#                         print("everything fine till here 3")
#                     return gr.update(value=f"Custom configuration loaded successfully! \n{new_path_errors}"), game_log, description, gr.update(choices=choices), game_session, gr.update(value=custom_config), output_media
                
#             return gr.update(value=f"Custom configuration loaded successfully! \n{new_path_errors}"), game_log, description, gr.update(choices=choices), game_session, gr.update(value=custom_config)
#         except json.JSONDecodeError as e:
#             # Get the line number and column of the error
#             lineno, colno = e.lineno, e.colno

#             # Get the problematic line
#             lines = custom_config.split('\n')
#             error_line = lines[lineno - 1] if lineno <= len(lines) else ""

#             # Create a pointer to the error location
#             pointer = ' ' * (colno - 1) + '^'

#             error_message = f"Invalid JSON format in custom configuration:\n"
#             error_message += f"Error at line {lineno}, column {colno}:\n"
#             error_message += f"{error_line}\n"
#             error_message += f"{pointer}\n"
#             error_message += f"Error details: {str(e)}"

#             return gr.update(value=error_message), gr.update(), gr.update(), None, gr.update(value=custom_config), game_session, gr.update(value=custom_config)
#         except Exception as e:
#             return gr.update(value=f"Error loading custom configuration: {str(e)}"), gr.update(), gr.update(), None, gr.update(value=custom_config), game_session, gr.update(value=custom_config)

#     # If no custom config, start with the default configuration
#     starting_location = next(iter(all_states.keys()))
#     starting_state = next(iter(all_states[starting_location].keys()))
#     game_session = GameSession(starting_location, starting_state)
#     description, choices, game_log = game_session.get_current_state_info()
#     return description, gr.update(choices=choices), game_log, game_session, gr.update()

def load_game(custom_config=None, with_media=False):
    global all_states
    if not custom_config:
        return gr.update(value="No custom configuration provided."), None, None, None, None, None, None

    try:
        new_config = json.loads(custom_config)
        all_states = new_config

        # Determine the starting location and state
        starting_location = next(iter(all_states.keys()))
        starting_state = next(iter(all_states[starting_location].keys()))
        print(f"Starting location: {starting_location}, Starting state: {starting_state}")

        game_session = GameSession(starting_location, starting_state)
        description, choices, game_log = game_session.get_current_state_info()
        new_path_errors = validate_transitions(all_states)
        
        output_media = []

        if with_media:
            media_list = all_states[starting_location][starting_state].get('media', [])
            print(f"Media list: {media_list}")
            
            if media_list:
                for media_path in media_list:
                    media_component = create_media_component(media_path)
                    output_media.append(media_component)
                print(f"Created {len(output_media)} media components")

        success_message = f"Custom configuration loaded successfully!\n{new_path_errors}"
        return (
            gr.update(value=success_message),
            game_log,
            description,
            gr.update(choices=choices),
            game_session,
            gr.update(value=custom_config),
            output_media if with_media else None
        )

    except json.JSONDecodeError as e:
        error_message = format_json_error(custom_config, e)
        return gr.update(value=error_message), None, None, None, None, gr.update(value=custom_config), None

    except Exception as e:
        error_message = f"Error loading custom configuration: {str(e)}"
        return gr.update(value=error_message), None, None, None, None, gr.update(value=custom_config), None

def format_json_error(config, error):
    lineno, colno = error.lineno, error.colno
    lines = config.split('\n')
    error_line = lines[lineno - 1] if lineno <= len(lines) else ""
    pointer = ' ' * (colno - 1) + '^'

    return f"""Invalid JSON format in custom configuration:
Error at line {lineno}, column {colno}:
{error_line}
{pointer}
Error details: {str(error)}"""

initgameinfo = start_game()

#-----------------------------------------------------------------------------------------------------------------------------------

with gr.Blocks() as demo:
    gr.HTML("""<div style="width: 100%; text-align: center">Main ideas for this space is (June 2024) (Custom component planning?):</div>
    <div style="display: flex; justify-content: center; margin-bottom: 20px; align-items: center;">
        <div style="width: 20%; text-align: center">We can generate almost any media data and more </div>
        <div style="width: 20%; text-align: center">A program exist around data </div>
        <div style="width: 20%; text-align: center">Time moves in a straight so all considerations are flattend by the nature of time </div>
        <div style="width: 20%; text-align: center">llms good at short questions </div>
        <div style="width: 20%; text-align: center">HF + Gradio allows for api use so this my prototype tool for tool use test</div>
    </div>""")
    with gr.Tab("Skeleton Generator"):
        with gr.Tab("Schema First"):
            gr.HTML("Some Kinds of game skeletons ideas - Timelines, Graph as State machine paths, Economy ecosystem")
            gr.HTML("One prompt to be used to test models - <br>Please make 10 python lists for the types of media files and their purposes in a game and then use those lists to random generate a timeline of 20 items when the function is called <br>Great next suggest ways to improve this function to create better timelines")
            with gr.Accordion("Proto Config Assist"):
                gr.Markdown("Editing placeholder")
                with gr.Accordion("Can copy in the Test Example State Machine tab - only linear path for now", open=False):
                    gr.Markdown("# Story and Timeline Generator")
                    gr.Markdown("Click the button to generate a random timeline and story based on UI elements and story events. <br>Ask an LLM to use this to write a story around")
                    with gr.Accordion("JSON with no edits"):
                        with gr.Row():
                            timeline_output_with_assets = gr.Textbox(label="Timeline with Assets Considered", lines=20)
                            timeline_output = gr.Textbox(label="Timeline (Order might be different for now)", lines=20)
                            story_output = gr.Textbox(label="Generated Story (Order might be different for now)", lines=20)
                        with gr.Row():
                            game_structure_output_text_with_media = gr.Code(language="json")
                            game_structure_output_text = gr.Code(language="json")

                with gr.Row():
                    generate_no_ui_timeline_points = gr.Slider(minimum=1, value=10, step=1, maximum=30, label="Choose the amount of ui timeline points")
                    generate_no_media_timeline_points = gr.Slider(minimum=1, value=5, step=1, maximum=30, label="Choose the amount of media timeline points")
                    generate_with_media_check = gr.Checkbox(label="Generate with media", value=True)
                generate_button = gr.Button("Generate Story and Timeline")

                @gr.render(inputs=game_structure_output_text_with_media)
                def update(game_structure_output_text_with_media):
                    return show_elements_json_input(game_structure_output_text_with_media)
                
                generate_button.click(generate_story_and_timeline, inputs=[generate_no_ui_timeline_points, generate_no_media_timeline_points, generate_with_media_check], outputs=[timeline_output_with_assets, timeline_output, story_output, game_structure_output_text_with_media, game_structure_output_text])
                
            gr.HTML("Splits by new line - The idea here was to allow for saving the file ")
            input_text = gr.Textbox(label="Input Text", lines=10)
            output_group = gr.Group()
            
            @gr.render(inputs=input_text)
            def update(text):
                return show_elements(text)
            
        with gr.Tab("Asset First"):
            gr.HTML("Make Asset and make the transitions using LLM")

    with gr.Tab("Test Example State Machine"): 
        with gr.Tab("Config Without Assets"):
            with gr.Row():
                with gr.Column(scale=2):
                    gr.Markdown("# Text-based Adventure Game")

                    description = gr.Textbox(label="Current Situation", lines=4, value=initgameinfo[0])
                    choices = gr.Radio(label="Your Choices", choices=initgameinfo[1])
                    submit_btn = gr.Button("Make Choice")
                    game_log = gr.Textbox(label="Game Log", lines=20, value=initgameinfo[2])
                    game_session = gr.State(value=initgameinfo[3])
                    submit_btn.click(
                        make_choice,
                        inputs=[choices, game_session],
                        outputs=[description, choices, game_log, game_session]
                    )
                with gr.Column(scale=1):
                    gr.Markdown("# Debugging")
                    error_box = gr.Textbox(label="Path Errors", lines=4, value=path_errors)
                    with gr.Accordion("Config (Game Spoiler and Example for llm to remix)", open=False):
                        custom_config = gr.Textbox(label="Custom Configuration (JSON)", value=json.dumps(all_states, default=lambda o: o.__dict__, indent=2), lines=8)
                        custom_configbtn = gr.Button("Load Custom Config")

                        custom_configbtn.click(
                            load_game,
                            inputs=[custom_config],
                            outputs=[error_box, game_log, description, choices, game_session, custom_config]
                        )
        with gr.Tab("Config With Assets"):
            gr.HTML("Placeholder as not complete yet (still only text, current issue is how to switch gradio output, maybe output is gr.Group and we constantly add the appropriate gr for each file type? What about multi file types on one state?)")
            with gr.Row():
                with gr.Column(scale=2):
                    gr.Markdown("# Text-based Adventure Game")

                    wadescription = gr.Textbox(label="Current Situation", lines=4, value=initgameinfo[0])
                    wamediabool = gr.State(value=True)
                    wamedia = gr.State(["testmedia/Stable Audio - Raindrops, output.wav"])

                    @gr.render(inputs=wamedia)
                    def dynamic_with_media(media_items):
                        print(media_items)
                        with gr.Group() as wamediagrouping: 
                            gr.HTML("Placeholder to load all media tests")
                            for item in media_items:
                                create_media_component(item)
                        
                        return wamediagrouping
                    
                    wachoices = gr.Radio(label="Your Choices", choices=initgameinfo[1])
                    wasubmit_btn = gr.Button("Make Choice")
                    wagame_log = gr.Textbox(label="Game Log", lines=20, value=initgameinfo[2])
                    wagame_session = gr.State(value=initgameinfo[3])
                    wasubmit_btn.click(
                        make_choice,
                        inputs=[wachoices, wagame_session],
                        outputs=[wadescription, wachoices, wagame_log, wagame_session]
                    )
                with gr.Column(scale=1):
                    gr.Markdown("# Debugging")
                    waerror_box = gr.Textbox(label="Path Errors", lines=4, value=path_errors)
                    with gr.Accordion("Config (Game Spoiler and Example for llm to remix)", open=False):
                        wacustom_config = gr.Textbox(label="Custom Configuration (JSON)", value=json.dumps(all_states, default=lambda o: o.__dict__, indent=2), lines=8)
                        wacustom_configbtn = gr.Button("Load Custom Config")

                        wacustom_configbtn.click(
                            load_game,
                            inputs=[wacustom_config, wamediabool],
                            outputs=[waerror_box, wagame_log, wadescription, wachoices, wacustom_config, wagame_session, wamedia]
                        )
    with gr.Tab("Custom JS Config Creator"):
        gr.HTML("Companion Space for zerogpu / client api workflow planning for a way to send a zip to the Basic Game Engine at the bottom of https://huggingface.co/spaces/KwabsHug/TestSvelteStatic (Also to test how much can be done majority on cpu)")
        with gr.Tab("Simple Config Creator"):
            inventory_items = gr.State([])
            skills_items = gr.State([])
            objectives_items = gr.State([])
            targets_items = gr.State([])

            with gr.Tabs():
                with gr.TabItem("Inventory"):
                    inventory_type = gr.Textbox(label="Type")
                    inventory_name = gr.Textbox(label="Name")
                    inventory_description = gr.Textbox(label="Description")
                    add_inventory = gr.Button("Add Inventory Item")
                    inventory_textbox = gr.JSON(label="Inventory Items", value=[])

                with gr.TabItem("Skills"):
                    skills_branch = gr.Textbox(label="Branch")
                    skills_name = gr.Textbox(label="Name")
                    skills_learned = gr.Dropdown(choices=["True", "False"], label="Learned")
                    add_skill_button = gr.Button("Add Skill")
                    skills_textbox = gr.JSON(label="Skills", value=[])

                with gr.TabItem("Objectives"):
                    objectives_id = gr.Textbox(label="ID")
                    objectives_name = gr.Textbox(label="Name")
                    objectives_complete = gr.Dropdown(choices=["True", "False"], label="Complete")
                    add_objective_button = gr.Button("Add Objective")
                    objectives_textbox = gr.JSON(label="Objectives", value=[])

                with gr.TabItem("Targets"):
                    targets_name = gr.Textbox(label="Name")
                    targets_x = gr.Textbox(label="X Coordinate")
                    targets_y = gr.Textbox(label="Y Coordinate")
                    targets_collisionType = gr.Textbox(label="Collision Type")
                    targets_collisiontext = gr.Textbox(label="Collision Text")
                    add_target_button = gr.Button("Add Target")
                    targets_textbox = gr.JSON(label="Targets", value=[])

                with gr.TabItem("Placeholders for Modal Target"):
                    gr.HTML("Placeholder")

                with gr.TabItem("Placeholders for State Machine Modal Target"):
                    gr.HTML("Placeholder")

                with gr.TabItem("Placeholders for Background"):
                    gr.HTML("Placeholder")

            config_output = gr.JSON(label="Updated Configuration")

            @gr.render(inputs=[inventory_items, skills_items, objectives_items, targets_items]) #, outputs=config_output)
            def aggregate_config(inventory, skills, objectives, targets):
                config = default_config.copy()
                config['inventory'] = inventory
                config['skills'] = skills
                config['objectives'] = objectives
                config['targets'] = targets
                return config

            add_inventory.click(add_inventory_item, inputs=[inventory_items, inventory_type, inventory_name, inventory_description], outputs=inventory_textbox)
            add_inventory.click(aggregate_config, inputs=[inventory_items, skills_items, objectives_items, targets_items], outputs=config_output)

            add_skill_button.click(add_skill, inputs=[skills_items, skills_branch, skills_name, skills_learned], outputs=skills_textbox)
            add_skill_button.click(aggregate_config, inputs=[inventory_items, skills_items, objectives_items, targets_items], outputs=config_output)

            add_objective_button.click(add_objective, inputs=[objectives_items, objectives_id, objectives_name, objectives_complete], outputs=objectives_textbox)
            add_objective_button.click(aggregate_config, inputs=[inventory_items, skills_items, objectives_items, targets_items], outputs=config_output)

            add_target_button.click(add_target, inputs=[targets_items, targets_name, targets_x, targets_y, targets_collisionType, targets_collisiontext], outputs=targets_textbox)
            add_target_button.click(aggregate_config, inputs=[inventory_items, skills_items, objectives_items, targets_items], outputs=config_output)
        
        with gr.Tab("Advanced Config Creator"):
            gr.HTML("Config with More than text and images")
                    

    with gr.Tab("Asset Generation"):
        gr.HTML("With some ideas from gemini-1.5-flash-api-0514 and reka-flash-preview-20240611 <br><br>Licenses for the spaces still to be evaluated")

        with gr.Tab("Save files"):
            gr.HTML("For Dynamic events overnight or when player is not active what can LLMS edit? <br><br>eg. Waiting for a letter from a random npc can be decided by the llm <br>eg. Improved Stats on certain days (eg. bitrthday) <br>Privacy <br>User Directed DLC eg. Rockstar Editor with local llm guide")
            gr.HTML("Some ideas - In game websites eg. GTA esp stock markets, news; ")
            gr.HTML("Placeholder for huggingface spaces that can assist - https://huggingface.co/nvidia/Nemotron-4-340B-Instruct (Purpose is supposed to be synthetic data generation) ")
            gr.HTML("Placeholder for models small enough to run on cpu here in this space that can assist (9b and under) <br>initial floor for testing can be https://huggingface.co/spaces/Qwen/Qwen2-0.5B-Instruct, https://huggingface.co/spaces/Qwen/Qwen2-1.5b-instruct-demo, https://huggingface.co/spaces/stabilityai/stablelm-2-1_6b-zephyr, https://huggingface.co/spaces/IndexTeam/Index-1.9B, https://huggingface.co/microsoft/Phi-3-mini-4k-instruct")

        with gr.Tab("Images"):
            gr.HTML("Concept Art, UI elements, Static/3D Characters, Environments and Objects")
            gr.HTML("Image Caption =  https://huggingface.co/spaces/microsoft/Promptist, https://huggingface.co/spaces/gokaygokay/SD3-Long-Captioner, https://huggingface.co/spaces/gokaygokay/Florence-2,  ")
            gr.HTML("Images Generation Portraits = https://huggingface.co/spaces/okaris/omni-zero")
            gr.HTML("Images Generation General = https://huggingface.co/spaces/stabilityai/stable-diffusion-3-medium, https://huggingface.co/spaces/PixArt-alpha/PixArt-Sigma, https://huggingface.co/spaces/stabilityai/stable-diffusion, https://www.craiyon.com/, https://huggingface.co/spaces/prodia/sdxl-stable-diffusion-xl")
            gr.HTML("Images Generation Posters with text - https://huggingface.co/spaces/GlyphByT5/Glyph-SDXL-v2")
            gr.HTML("Images Generation Very Specific position and shape - https://huggingface.co/spaces/linoyts/scribble-sdxl-flash")
            gr.HTML("SVG Generation = Coding models - ")
            gr.HTML("Vision Models for descriptions <br> https://huggingface.co/spaces/gokaygokay/Florence-2 <br>https://huggingface.co/spaces/vilarin/VL-Chatbox - glm 4v 9b <br>")
            gr.HTML("Upscalers (save data transfer costs? highly detailed characters?) - https://huggingface.co/spaces/gokaygokay/AuraSR")
            gr.HTML("Placeholder for huggingface spaces that can assist ")
            gr.HTML("Placeholder for models small enough to run on cpu here in this space that can assist")
        
        with gr.Tab("Audio"):
            gr.HTML("Music - Background, Interactive, Cutscene, Menu <br>Sound Effects - Environment, character, action (environmental triggered by user eg. gun), UI <br>Speech - Dialouge, narration, voiceover <br>The new render function means the Config can be made and iframe/api functions can be ordered as neccessary based on the part of the config that needs it to streamline workflows based on current state of config ")
            gr.HTML("Placeholder for huggingface spaces that can assist")
            gr.HTML("Audio Sound Effects - https://huggingface.co/spaces/artificialguybr/Stable-Audio-Open-Zero")
            gr.HTML("Placeholder for models small enough to run on cpu here in this space that can assist")

        with gr.Tab("Video"):
            gr.HTML("Cutscenes, Tutorials, Trailers")
            gr.HTML("Placeholder for huggingface spaces that can assist - https://huggingface.co/spaces/KingNish/Instant-Video, https://huggingface.co/spaces/multimodalart/stable-video-diffusion, https://huggingface.co/spaces/multimodalart/stable-video-diffusion")
            gr.HTML("Placeholder for models small enough to run on cpu here in this space that can assist")

        with gr.Tab("3D"):
            gr.HTML("Characters, Environments, Objects")
            gr.HTML("Placeholder for huggingface spaces that can assist - https://huggingface.co/spaces/dylanebert/3d-arena, https://huggingface.co/spaces/Wuvin/Unique3D, https://huggingface.co/spaces/stabilityai/TripoSR, https://huggingface.co/spaces/hysts/Shap-E")
            gr.HTML("Placeholder for models small enough to run on cpu here in this space that can assist")

        with gr.Tab("Animations (for lower resource use)"):
            gr.HTML("Characters, Environments, Objects")
            gr.HTML("Placeholder for huggingface spaces that can assist - image as 3d object in video https://huggingface.co/spaces/ashawkey/LGM")
            gr.HTML("Placeholder for models small enough to run on cpu here in this space that can assist")

        with gr.Tab("Fonts"):
            gr.HTML("Style of whole game, or locations, or characters")
            gr.HTML("Placeholder for huggingface spaces that can assist - there was a space that could make letter into pictures based on the prompt but I cant find it now")
            gr.HTML("Placeholder for models small enough to run on cpu here in this space that can assist")
        
        with gr.Tab("Shaders and related"):
            gr.HTML("Any output that is not understood by the common person can be used as special effects eg. depth map filters on images etc.")
            gr.HTML("Post-processing Effects, material effects, Particle systems, visual feedback")
            gr.HTML("Visual Effects - eg. explosion can turn all items white for a moment, losing conciousness blurs whole screen")
            gr.HTML("Placeholder for huggingface spaces that can assist - https://huggingface.co/spaces/EPFL-VILAB/4M, https://huggingface.co/spaces/EPFL-VILAB/MultiMAE ")
            gr.HTML("Placeholder for models small enough to run on cpu here in this space that can assist")
        
    with gr.Tab("Other Considerations"):
        with gr.Tab("General"):
            gr.HTML("Experiment for https://huggingface.co/spaces/ysharma/open-interpreter/blob/main/app.py inplementation with gradio client api")
            gr.HTML("Some conderations for future integration: https://huggingface.co/spaces/dylanebert/3d-arena, https://github.com/fudan-generative-vision/hallo")

            gr.HTML("Useful Spaces and links: https://huggingface.co/spaces/artificialguybr/Stable-Audio-Open-Zero https://huggingface.co/spaces/stabilityai/TripoSR https://huggingface.co/spaces/wangfuyun/AnimateLCM-SVD https://huggingface.co/spaces/multimodalart/face-to-all https://huggingface.co/spaces/facebook/MusicGen https://huggingface.co/spaces/Doubiiu/tooncrafter")
            
            gr.HTML("langchain docs as awareness for alot of the integration use cases and providers that are possible - https://python.langchain.com/v0.2/docs/integrations/tools/")

            gr.HTML("https://huggingface.co/spaces/linoyts/scribble-sdxl-flash as map planner")

            gr.HTML("---------------------------------------Gameplay Ideas-------------------------------")
            gr.HTML("https://huggingface.co/spaces/Lin-Chen/ShareCaptioner-Video - game use example police questions a event with multiple eye witnesses needs to give as close to the caption description to win")
        with gr.Tab("State management through huggingface?"):
            gr.HTML("Huggingface as the login provider? - https://huggingface.co/docs/hub/en/spaces-oauth https://huggingface.co/docs/hub/en/oauth, persistent storage - https://huggingface.co/docs/hub/en/spaces-storage")
        with gr.Tab("Finetuning options"):
            gr.HTML("Price - https://openpipe.ai/pricing")
        with gr.Tab("Backend and/or Hosting?"):
            gr.HTML("Prototyping and freemium <br>free api <br>HF Pro subscription")
            gr.HTML("GPU (Data privacy) = No Rate limits? - https://replicate.com/pricing, https://lambdalabs.com/service/gpu-cloud https://huggingface.co/pricing#endpoints https://tensordock.com/cloud-gpus")
            gr.HTML("Speed - Groq, SambaNova, https://www.etched.com/announcing-etched ")
            gr.HTML("Price - Coding - https://aider.chat/docs/leaderboards/ -  https://www.deepseek.com/ 0.3 per million - is this per token or chinese character as that means converting code to chinese if possible can save api cost?")
    with gr.Tab("Asset loading test"):
        with gr.Row():
            gr.Image(value="testmedia/Flash scribble SDXL - random squiggles as roads.webp")
            gr.Video(value="testmedia/SVD - random squiggles as roads video 004484.mp4")
            gr.Audio(value="testmedia/Stable Audio - Raindrops, output.wav")
        gr.HTML("""
    <div>
        <p>This is a placeholder to test use as an all-media loader for ease of prototyping. Seems gradio HTML doesnt support loading local assets or my file path is wrong</p>
    </div>
    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
        <div style="width: 30%;">
            <img src="testmedia/Flash scribble SDXL - random squiggles as roads.webp" alt="Random squiggles as roads" style="width: 100%; height: auto;">
        </div>
        <div style="width: 30%;">
            <video width="100%" height="auto" controls>
                <source src="testmedia/SVD - random squiggles as roads video 004484.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div style="width: 30%;">
            <audio controls style="width: 100%;">
                <source src="testmedia/Stable Audio - Raindrops, output.wav" type="audio/wav">
                Your browser does not support the audio element.
            </audio>
        </div>
    </div>
    """)

demo.launch()