diff --git a/pages/about.py b/pages/about.py index 6067d06..dbdce54 100644 --- a/pages/about.py +++ b/pages/about.py @@ -3,5 +3,17 @@ dash.register_page(__name__, top_nav=True) - -layout = html.Div("About the project") +layout = html.Div( + style={'display': 'flex', 'marginTop': '40px'}, + children=[ + # Text Column + html.Div( + style={'width': '50%', 'textAlign': 'justify', 'paddingLeft': '10px', 'fontSize': '17px'}, + children=[ + html.P(""" + The goal of this project is to equip everyone interested with the knowledge and tools necessary to navigate the landscape of responsible AI. By offering a centralized resource for high-quality, vetted information on responsible AI, the people behind the project hope to foster a deeper understanding and commitment to ethical AI practices among all stakeholders in the field. + """), + ] + ), + ] + ) diff --git a/pages/contribute.py b/pages/contribute.py index 68b0f0c..f7b1e22 100644 --- a/pages/contribute.py +++ b/pages/contribute.py @@ -1,7 +1,52 @@ -from dash import html import dash +from dash import html +import dash_bootstrap_components as dbc + dash.register_page(__name__, top_nav=True) -layout = html.Div("Contribute") +layout = html.Div([ + html.P( + """ + In the ever-evolving landscape of Artificial Intelligence, the pursuit of responsible and ethical practices is a collective journey. The goal of this project is to create an expansive, inclusive repository of resources that caters to the diverse needs and perspectives within the field of AI. To achieve this, we rely on the invaluable contributions of the community — these insights, experiences, and knowledge are the keystones of this shared mission. + """, + style={'textAlign': 'justify', 'fontSize': '17px', 'paddingRight': '100px'} + ), + html.Strong("Why Your Contribution Matters", style={'fontSize': '18px', 'paddingRight': '100px'}), + html.P( + """ + The complexity and breadth of AI ethics require a multitude of voices and a wealth of information. By gathering diverse resources in a community-driven manner, this project aims ensure that this collection remains comprehensive, relevant, and insightful. Your contribution helps in: + """, + style={'textAlign': 'justify', 'fontSize': '17px', 'paddingRight': '100px'} + ), + html.Ul([ + html.Li("Expanding the Repository: Every new resource enriches the library, offering fresh perspectives and insights.", style={'fontSize': '17px', 'paddingRight': '100px'}), + html.Li("Ensuring Diversity and Inclusivity: Contributions from a wide range of individuals and organizations help to cover the myriad facets of responsible AI, including underrepresented areas.", style={'fontSize': '17px', 'paddingRight': '100px'}), + html.Li("Staying Current: The field of AI is rapidly evolving. Your contributions keep this project updated with the latest trends, research, and best practices.", style={'fontSize': '17px', 'paddingRight': '100px'}) + ]), + html.Strong("How to Contribute", style={'fontSize': '18px', 'paddingRight': '100px'}), + html.P( + """ + If you have a resource — be it a publication, a recorded talk, workshop materials, or policy documents — that aligns with the ethos of responsible AI, we encourage you to share it with the community. Here’s how you can contribute: + """, + style={'textAlign': 'justify', 'fontSize': '17px', 'paddingRight': '100px'} + ), + html.Ul([ + html.Li("Review: Before submitting, please review the information you want to submit to ensure that it aligns with this project's focus on responsible AI.", style={'fontSize': '17px', 'paddingRight': '100px'}), + html.Li("Prepare Your Submission: Gather all necessary details about your resource, including titles, authors, a brief description, and any relevant links or attachments.", style={'fontSize': '17px', 'paddingRight': '100px'}), + html.Li("Submit Your Resource: Use the form below to submit your resource. Please provide as much information as possible to help the project team understand the value of your contribution.", style={'fontSize': '17px', 'paddingRight': '100px'}), + html.Li("Review Process: The project team will review your submission to ensure it aligns with the project's aims. The team may reach out to you for further information if needed.", style={'fontSize': '17px', 'paddingRight': '100px'}), + html.Li("Publication: Once approved, your resource will be added to the collection and made available to the community of learners and practitioners.", style={'fontSize': '17px', 'paddingRight': '100px'}) + ]), + html.Strong("Submit Your Resource — Contribution Form", style={'fontSize': '18px', 'paddingRight': '100px'}), + # Here you would include your form layout + html.P( + """ + Your contributions play a vital role in shaping a responsible AI future. Together, let’s build a repository that not only informs but also inspires action towards ethical AI practices. Thank you for being an integral part of this initiative! + """, + style={'textAlign': 'justify', 'fontSize': '17px', 'paddingRight': '100px'} + ) +], style={'padding': '20px'}) + +# Note: You need to add the actual form layout where indicated. diff --git a/pages/home.py b/pages/home.py index dac7d0e..72548da 100644 --- a/pages/home.py +++ b/pages/home.py @@ -3,5 +3,51 @@ dash.register_page(__name__, path="/", top_nav=True) +layout = html.Div( + style={'display': 'flex', 'marginTop': '40px'}, + children=[ + # Text Column + html.Div( + style={'width': '50%', 'textAlign': 'justify', 'paddingLeft': '10px', 'fontSize': '17px'}, + children=[ + html.P(""" + In an age where Artificial Intelligence is rapidly advancing, the landscape is often marred by the development of AI systems that inadvertently perpetuate biases and overlook ethical considerations. This outlines the imperative need for a responsible approach to AI. + """), + html.P([ + "This website aims to offer a curated repository of resources centered on Responsible AI. Unlike a platform for active engagement, it provides a comprehensive library where visitors can access and query a wealth of information and tools to understand and advocate for ethical AI practices. The ", + html.A("About page", href="https://peerherholz-responsible-ai-resources.hf.space/about"), + " provides further information and an overview of the website and its purpose." + ]), + html.P([ + "The repository includes thorough publications analyzing the ethical dimensions of AI, insightful talks and presentations exploring the nuances of responsibility in AI development, interactive workshops designed to instill ethical AI practices, and comprehensive policies to guide the development of unbiased and equitable AI solutions. Please have a look at the ", + html.A("Resources page", href="https://peerherholz-responsible-ai-resources.hf.space/resources"), + " to explore these and other resources further." + ]), + html.P([ + "The idea was initially conceived at the first ", + html.A("MILA summer school on responsible AI and human rights", href="https://mila.quebec/en/summer-school-responsible-ai/"), + " and would not have been possible without it. Tremendous thanks and kudos to the organizers and participants of the summer school for their contributions and support, as well as being a beacon concerning this highly important topic and development." + ]), + ] + ), -layout = html.Div("Home page content") \ No newline at end of file + # Icons Column + html.Div( + style={'width': '50%', 'textAlign': 'center', 'paddingRight': '10px'}, + children=[ + html.A(href="https://www.zotero.org/groups/5081008/responsible_ai_human_rights_mila_2023", + children=[html.Img(src="https://www.zotero.org/support/_media/logo/zotero_512x512x32.png", style={'height': '40px', 'marginRight': '10px'})] + ), + html.A(href="https://github.com/PeerHerholz/responsible_AI_resources", + children=[html.Img(src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png", style={'height': '50px', 'marginRight': '10px'})] + ), + html.A(href="https://huggingface.co/spaces/peerherholz/responsible_AI_resources/tree/main", + children=[html.Img(src="https://cdn-lfs.huggingface.co/repos/96/a2/96a2c8468c1546e660ac2609e49404b8588fcf5a748761fa72c154b2836b4c83/942cad1ccda905ac5a659dfd2d78b344fccfb84a8a3ac3721e08f488205638a0?response-content-disposition=inline%3B+filename*%3DUTF-8%27%27hf-logo.svg%3B+filename%3D%22hf-logo.svg%22%3B&response-content-type=image%2Fsvg%2Bxml&Expires=1709292612&Policy=eyJTdGF0ZW1lbnQiOlt7IkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcwOTI5MjYxMn19LCJSZXNvdXJjZSI6Imh0dHBzOi8vY2RuLWxmcy5odWdnaW5nZmFjZS5jby9yZXBvcy85Ni9hMi85NmEyYzg0NjhjMTU0NmU2NjBhYzI2MDllNDk0MDRiODU4OGZjZjVhNzQ4NzYxZmE3MmMxNTRiMjgzNmI0YzgzLzk0MmNhZDFjY2RhOTA1YWM1YTY1OWRmZDJkNzhiMzQ0ZmNjZmI4NGE4YTNhYzM3MjFlMDhmNDg4MjA1NjM4YTA%7EcmVzcG9uc2UtY29udGVudC1kaXNwb3NpdGlvbj0qJnJlc3BvbnNlLWNvbnRlbnQtdHlwZT0qIn1dfQ__&Signature=UqcNXH6zgVENFXZadBssIsnnqSj6E4xGMNLuV2IdzJnhuZwK19wsmLNKWY-W454OzD8hCcc0Qp4lWWNE9BjTrWuvowUs92XNRdjtu7ngHhqYCe07OgzN4UDESionLZhJ8PC7Py0ECd1tcJ98iV4Guf2cqVM4%7E-gvEJsgiai-RM4vb02uZuT6l6bOxTUFF-StgTU29FpoSuIjyinOkV7qV5jocTfWcWKaL4zRM3sUAoT6e8Z-Lgf858AEs5EWPhKH7YJXV8HQ%7EXIhSextKgxRp-wuFDusBuk06x6f9tLw07OovFbVDo0E72nifZDiLRu7ZSQgeKy5R3yfJyYfQXD4Kw__&Key-Pair-Id=KVTP0A1DKRTAX", style={'height': '50px'})] + ), + html.A(href="https://osf.io/hgfbx/", + children=[html.Img(src="https://tse1.mm.bing.net/th?id=OIP.Y1A1So_sYtPkkVBZYdi8UQHaCy&pid=Api", style={'height': '50px'})] + ) + ] + ) + ] +) diff --git a/pages/resources.py b/pages/resources.py index 0b4b557..000dd8d 100644 --- a/pages/resources.py +++ b/pages/resources.py @@ -1,18 +1,36 @@ from dash import html - import dash import dash_bootstrap_components as dbc - from .side_bar import sidebar -dash.register_page( - __name__, - name="Resources", - top_nav=True, -) - +dash.register_page(__name__, name="Resources", top_nav=True) def layout(): - return dbc.Row( - [dbc.Col(sidebar(), width=2), dbc.Col(html.Div("Resources"), width=10)] - ) + return dbc.Row([ + dbc.Col(sidebar(), width=2), # Sidebar + dbc.Col( # Main content area + html.Div([ + html.P("Here, you will find a diverse array of resources aimed at addressing the challenges and biases inherent in current AI technologies.", style={'textAlign': 'justify', 'marginRight': '60px', 'fontSize': '17px', 'marginBottom': '1px'}), + html.P("These include:", style={'textAlign': 'justify', 'marginRight': '60px', 'fontSize': '17px'}), + html.Ol([ + html.Li([ + html.Strong("Insightful Publications:"), + " Explore a selection of scholarly articles, research papers, and reports delving into the ethical, social, and technical aspects of responsible AI. These publications serve as a foundational resource for understanding the complexities and responsibilities in AI development." + ], style={'marginBottom': '10px', 'marginRight': '100px', 'marginLeft': '-20px', 'textAlign': 'justify', 'fontSize': '17px'}), + html.Li([ + html.Strong("Expert Talks and Presentations:"), + " Find recordings and transcripts of talks by leading experts in the field. These presentations shed light on the latest developments, challenges, and solutions in the realm of ethical AI." + ], style={'marginBottom': '10px', 'marginRight': '100px', 'marginLeft': '-20px', 'textAlign': 'justify', 'fontSize': '17px'}), + html.Li([ + html.Strong("Educational Workshops Material:"), + " While this endeavor does not host/organize workshops directly, it provides materials and guides from past workshops focused on responsible AI. These resources are ideal for self-learning or for educators to integrate into their curriculum." + ], style={'marginBottom': '10px', 'marginRight': '100px', 'marginLeft': '-20px', 'textAlign': 'justify', 'fontSize': '17px'}), + html.Li([ + html.Strong("Guiding Policies and Frameworks:"), + " Discover a collection of policies, guidelines, and frameworks from around the world that aim to steer AI development towards ethical and responsible outcomes. These documents are crucial for policymakers, practitioners, and academics alike." + ], style={'marginRight': '100px', 'marginLeft': '-20px', 'textAlign': 'justify', 'fontSize': '17px'}) + ]) + ]), + width=10 + ) + ]) diff --git a/pages/side_bar.py b/pages/side_bar.py index ea1c8d4..6db989f 100644 --- a/pages/side_bar.py +++ b/pages/side_bar.py @@ -4,6 +4,21 @@ def sidebar(): + # Define the order of the topics + topic_order = [ + "topic-publications", + "topic-presentations", + "topic-workshops", + "topic-policies", + # Add more paths as needed + ] + + # Sort the page registry according to the defined order + sorted_pages = sorted( + dash.page_registry.values(), + key=lambda page: topic_order.index(page["path"]) if page["path"] in topic_order else float('inf') + ) + return html.Div( dbc.Nav( [ @@ -14,7 +29,7 @@ def sidebar(): href=page["path"], active="exact", ) - for page in dash.page_registry.values() + for page in sorted_pages if page["path"].startswith("/topic") ], vertical=True, diff --git a/pages/workshops.py b/pages/topic_workshops.py similarity index 100% rename from pages/workshops.py rename to pages/topic_workshops.py