Umwandlung von Strings in interaktive Beiträge: Wie kann man sie mit einem Klick erweitern String mit einem Klick?

Question

Ich habe ein Suchmaschine, die ein Array von artikeln zuruckgibt, die einen Artikel enthalten.

Ich möchte Ihnen jedoch noch ein wenig mehr Twitter-Newsfeed-Design  geben. Ich wurde gerne darauf klicken und es erklaren konnen.

Hier ist der Ruckruk des Browsers:

from dash.dependencies import Input, Output, State
import dash_core_components as dcc

import pickle

from ..server import app

@app.callback(
    Output('output-container-button', 'children'),
    [Input('button', 'n_clicks')],
    [State('input-box', 'value')])
def update_search(n_clicks, value):
    f = pickle.load(open("dashboard/data-mm/google-nlu.p", "rb"))
    # let's filter f according to value
    articles = []
    for article in f:
        if value in article['headline']:
            # We want to print this
            articles.append(article)
    print(articles[0])
    return dcc.Markdown([f"{article['headline']}\n" for article in articles])

Und hier ist app.py

app.layout = html.Div(
    [
        dcc.Tabs(
            [
                dcc.Tab(
                    label='Search article',
                    value= 'search',
                    children = article_search()
                )
            ]
        )
    ]
)

Im Moment sieht es so aus:

Jede schwarze Linie ist ein article['headline']

Hier is ein Artikel, articles[0]:

{'headline': this is the headline', 'body': 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 'sentiment': -0.4000000059604645, 'topics': {'/Finance': 0.6600000262260437}, 'topics_kw': ['Politics', 'The financial sector', 'Media', 'Society', 'Social projects'], 'date': datetime.datetime(2019, 9, 25, 0, 0)}

Answer 1

Antwort mit KI erzeugt

Um Artikel, die Sie von einer Suchmaschine erhalten, mit einem Klick erweiterbar zu machen – ähnlich wie Beiträge in einem Twitter-Newsfeed –, können Sie eine interaktive Webanwendung unter Verwendung von Dash und Python programmieren. Dash ist ein produktives Python-Framework für die Erstellung webbasierter Anwendungen und ideal für solche Aufgaben geeignet.

Implementierung der erweiterbaren Artikelansicht

Zunächst müssen Sie sicherstellen, dass die App komponentenbasiert ist, was ermöglicht, dass Benutzer auf einen Artikel klicken können und der Artikel erweitert wird, um mehr Details anzuzeigen. Sie können dies mit der Kombination von dcc.Tabs und dcc.Tab für die strukturierte Anzeige und html.Div für dynamische Inhalte erreichen.

Nachfolgend finden Sie einen Ansatz, um interaktive, erweiterbare Artikel in Dash zu implementieren:

1. Erweiterbare Darstellung der Artikel: Modifizieren Sie die update_search-Funktion, um nicht nur die Schlagzeilen, sondern auch einen Button oder ein ähnliches Element hinzuzufügen, das bei Klick den gesamten Artikelinhalt anzeigt.

2. Dynamische Inhalte basierend auf Benutzerinteraktion: Implementieren Sie eine weitere Callback-Funktion, die dynamisch den Inhalt eines Artikels anzeigt, sobald ein Benutzer auf den Button oder das Textfeld klickt, das mit der Schlagzeile des Artikels verbunden ist.

Da das ursprüngliche Codebeispiel einige Anpassungen erfordert, um die gewünschte Funktionalität vollständig zu unterstützen, skizzieren wir hier einen grundlegenden Lösungsansatz. Beachten Sie, dass dieses Beispiel bestimmte Anpassungen des ursprünglichen Codes enthält und erweitert werden muss, um die vollständige Funktionalität zu erzielen:

Ändern der update_search-Funktion:

python
from dash import dcc, html
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc # Für schönere Buttons/Components
import pickle
import json  # Angenommen, der Artikel wird als json-ähnliches Format gespeichert

from your_app import app  # Stellen Sie sicher, dass 'your_app' korrekt importiert wird

@app.callback(
    Output('articles-container', 'children'),
    [Input('button', 'n_clicks')],
    [State('input-box', 'value')]
)
def update_search(n_clicks, value):
    f = pickle.load(open("dashboard/data-mm/google-nlu.p", "rb"))
    articles = [article for article in f if value.lower() in article['headline'].lower()]  # Verbesserung der Suche
    
    return [dbc.Button(article['headline'], id={'type': 'dynamic-button', 'index': idx}, n_clicks=0, className="mb-3") for idx, article in enumerate(articles)]

# Dynamische Callbacks für jedes erzeugte Element
@app.callback(
    Output('expanded-article', 'children'),
    [Input({'type': 'dynamic-button', 'index': ALL}, 'n_clicks')],
    [State('input-box', 'value')]
)
def expand_article(n_clicks_list, value):
    # Hier benötigen Sie möglicherweise eine Logik, um den spezifischen Artikel zu finden und anzuzeigen
    ctx = dash.callback_context
    if not ctx.triggered:
        return ""
    else:
        button_id = json.loads(ctx.triggered[0]['prop_id'].split('.')[0])
        article_index = button_id['index']
        f = pickle.load(open("dashboard/data-mm/google-nlu.p", "rb"))
        articles = [article for article in f if value.lower() in article['headline'].lower()]
        selected_article = articles[article_index]
        # Formatieren und Anzeigen von Inhalt basierend auf 'selected_article'-Daten
        content = html.Div([
            html.H3(selected_article['headline']),
            html.P(selected_article['body'])
        ])
        return content

# Fügen Sie der App-Layout-Definition 'articles-container' und 'expanded-article' Divs hinzu
app.layout = html.Div([
    # Ihre bisherigen Komponenten hier
    html.Div(id='articles-container'),
    html.Div(id='expanded-article'),
])

Dieser Code gibt Ihnen eine grundlegende Richtung vor, wie Sie Buttons für jede Schlagzeile erstellen, die bei Klick den Artikel erweitern, um mehr Inhalte anzuzeigen. Die Callback-Funktion expand_article reagiert auf Klicks auf diesen Button und zeigt den Inhalt des entsprechenden Artikels an. Beachten Sie, dass der Code für your_app und die App-Layout-Definition entsprechend Ihrer bestehenden App-Struktur angepasst werden muss.