How do I run HF space in Flutter?

Spaces
1

I am developing an application for android with Flutter, I was able to integrate the embed code provided by HF space into the application. However, I get an error in the image upload section, how can I solve this problem?

Flutter Code:


import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class PageTwo extends StatefulWidget {
  const PageTwo({Key? key}) : super(key: key);

  @override
  State<PageTwo> createState() => _HuggingfaceSpaceViewerState();
}

class _HuggingfaceSpaceViewerState extends State<PageTwo> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0xFF000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
          },
          onPageStarted: (String url) {
          },
          onPageFinished: (String url) {
          },
          onWebResourceError: (WebResourceError error) {
          },
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://huggingfacem4-idefics3.hf.space'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Huggingface Space'),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

Error when I try to upload an image: E/FrameEvents(30325): updateAcquireFence: Did not find frame.

image
image1199×2526 78 KB

1 Like
2

Perhaps:

1 Like
3

@John6666 Thank you for the response, but unfortunately, it didn’t solve my problem.

4

Then it is a question of the means of using HF’s space externally. As it turns out, it should be possible. Many people are doing it.
You could call the functions visible in the Use via API at the bottom of the page (although the auto-generated description contains some lies), or you could scrape and grab the Gradio component and request it, which would be more reliable.
I’m not very familiar with scraping pages using JS, but the resulting code didn’t seem difficult. There may be some information in the forum logs.

1 Like
5

This topic was automatically closed 12 hours after the last reply. New replies are no longer allowed.