React Native中TensorFlow模型预测结果展示问题求助

一、修复图像流转与预测结果展示问题 #

1. 梳理图像流转路径 #

你的拍照页面处理完图片后跳转到了Crop页面，需要确保Crop页面最终将处理后的图片URI传递到Results页面：

// 在Crop页面的确认按钮点击事件中添加导航逻辑
navigation.navigate('Results', { imageUri: processedImageUri });

2. 修正Results页面的预测逻辑 #

当前Results页面存在未正确获取参数、未异步处理预测请求的问题，以下是修复后的代码：

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import CustomNavBar from './NavBar';
import { getPredictions } from './modelload';

export default function Results({ route, navigation }) {
  const [prediction, setPrediction] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const { imageUri } = route.params; // 从导航参数获取图片URI

  useEffect(() => {
    const fetchPrediction = async () => {
      try {
        const predictions = await getPredictions(imageUri);
        // 将Tensor转换为可展示的普通数据
        const predictionValues = await Promise.all(predictions.map(tensor => tensor.array()));
        setPrediction(predictionValues);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchPrediction();
  }, [imageUri]);

  if (loading) {
    return <View style={styles.loadingContainer}><Text>正在预测...</Text></View>;
  }

  if (error) {
    return <View style={styles.errorContainer}><Text>错误：{error}</Text></View>;
  }

  return (
    <ScrollView>
      <View style={styles.container}>
        <Text style={styles.title}>Mole<Text style={styles.boldText}>Detect</Text></Text>

        {/* 新增预测结果展示区域 */}
        <View style={styles.predictionContainer}>
          <Text style={styles.predictionTitle}>预测结果：</Text>
          {prediction && prediction.map((result, index) => (
            <Text key={index} style={styles.predictionText}>
              {JSON.stringify(result)}
            </Text>
          ))}
        </View>

        {/* 原有页面元素保留 */}
        <View style={styles.circle}></View> 
        <View style={styles.topCircle}></View>
        <View style={styles.bottomCircle}></View> 

        <View style={styles.boxesContainer}>
          <View style={styles.leftAlignedBox}> 
            <View style={styles.headerBox}><Text style={styles.headerText}>Melanoma </Text></View>
            <Text style={styles.contentText}>
              If you have Melanoma: It often appears as an irregular, asymmetric mole with uneven borders, varying colors, and enlargement and / or bleeding.
            </Text>
          </View>

          <View style={styles.rightAlignedBox}>
            <View style={[styles.headerBox, styles.rightHeader]}><Text style={styles.headerText}>Further Steps</Text></View>
            <Text style={styles.contentText}>
              Visit NIH or CDC for what to do next.
              Please note that this is not an official diagnosis and you should consult a doctor for any serious doubts or possible skin conditions.
            </Text>
          </View>
        </View>

        <View style={styles.verticalLine}></View> 
        <CustomNavBar navigation={navigation} />
      </View>
    </ScrollView>
  );
}

3. 修正模型预测代码 #

移除重复导入并优化Tensor处理逻辑：

import * as tf from '@tensorflow/tfjs';
import { bundleResourceIO, decodeJpeg } from '@tensorflow/tfjs-react-native';
import * as FileSystem from 'expo-file-system';

const modelJSON = require('assets/model.json');
const modelWeights = require('assets/weights.bin');

const loadModel = async () => {
  try {
    const model = await tf.loadLayersModel(bundleResourceIO(modelJSON, modelWeights));
    return model;
  } catch (e) {
    console.log("[LOADING ERROR] info:", e);
    throw e; // 抛出错误让上层处理
  }
};

const transformImageToTensor = async (uri) => {
  const img64 = await FileSystem.readAsStringAsync(uri, { encoding: FileSystem.EncodingType.Base64 });
  const imgBuffer = tf.util.encodeString(img64, 'base64').buffer;
  const raw = new Uint8Array(imgBuffer);
  let imgTensor = decodeJpeg(raw);
  const scalar = tf.scalar(255);
  
  imgTensor = tf.image.resizeNearestNeighbor(imgTensor, [300, 300]);
  const tensorScaled = imgTensor.div(scalar);
  const img = tf.reshape(tensorScaled, [1, 300, 300, 3]);
  
  return img;
};

const makePredictions = async (batch, model, imagesTensor) => {
  const predictionsData = model.predict(imagesTensor);
  let pred = predictionsData.split(batch);
  return pred;
};

export const getPredictions = async (image) => {
  await tf.ready();
  const model = await loadModel();
  const tensorImage = await transformImageToTensor(image);
  const predictions = await makePredictions(1, model, tensorImage);
  
  // 清理Tensor避免内存泄漏
  tensorImage.dispose();
  model.dispose();
  
  return predictions;
};

二、自定义预测结果文本的字体和字号 #

1. 使用系统字体 #

直接在StyleSheet中定义字体属性：

const styles = StyleSheet.create({
  // 新增预测结果样式
  predictionContainer: {
    margin: 20,
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 10,
  },
  predictionTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    fontFamily: 'Arial', // 系统字体
  },
  predictionText: {
    fontSize: 18, // 自定义字号
    color: '#333',
    fontFamily: 'Helvetica', // 系统字体
  },
  // 原有样式保留...
});

2. 使用自定义字体 #

如果需要使用自定义字体，先通过expo-font加载：

expo install expo-font

在App.js中加载字体：

import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';

export default function App() {
  const [fontsLoaded] = useFonts({
    'CustomFont': require('./assets/fonts/CustomFont.ttf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    // 你的导航组件
  );
}

然后在样式中引用：

predictionText: {
  fontSize: 18,
  color: '#333',
  fontFamily: 'CustomFont', // 自定义字体
},

内容的提问来源于stack exchange，提问作者Shiven Khurana